Bootstrap 3 Introduction

What is Bootstrap?

Bootstrap is a front-end open source framework for web application design which consists of HTML, CSS and JavaScript for developing responsive, mobile-first website. Bootstrap, originally named Twitter Blueprint framework and was developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is completely free to download and use!

It maintains UI consistency, encourage consistency across internal tools. By using Bootstrap, you can create attractive web components like alert, tabs, carousel, and menu etc using CSS and JavaScript.

History

Bootstrap original name was Twitter Blueprint framework and developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is completely free to download and use! It was released as an free open source product in August 2011 on GitHub.

Why Use Bootstrap?

  • Designed for everyone, everywhere.
  • Bootstrap support to all latest browsers like Google Chrome, Firefox, IE, Opera and Safari.
  • Bootstrap makes front-end web development faster and easier.
  • Millions of amazing sites across the web are being built with Bootstrap.
  • Bootstrap is open source and can be downloaded from GitHub.
  • Easy to setup and enables developers to quickly develop web pages using its HTML, CSS and JavaScript components.
  • Bootstrap supports responsive web designing.
  • Bootstrap provides a uniform, modern appearance for formatting text, tables and form elements.
  • Bootstrap framework consists of Mobile first styles.

Bootstrap Package Includes

  • Components - Bootstrap provides built-in reusable components that provide alerts, navigation, iconography, dropdowns etc.
  • JavaScript Plugins - Bootstrap provides many custom jQuery plug-in. You can use them to increase functionality.
  • CSS - Bootstrap provides extensible classes, CSS setting including advanced grid system.
  • Customization - Bootstrap allows you to customize Bootstrap components and jQuery plug-in to build your own version.

Test Bootstrap Code Online

This Bootstrap tutorial includes many Bootstrap code examples with online editing facility. You can edit or write a code and click on a Run button to view the code result. You will find a See Live Example button at the bottom of the example code. Use it to verify the code and check the output with different options.

Bootstrap 3 Example

<!DOCTYPE html>
<html lang="en">
<head> <!-- www.techstrikers.com-->
  <title>First Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" 
rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
</head>
<body>

<div class="jumbotron text-center">
  <h1>Welcome to Bootstrap Tutorial</h1>
  <p>My first responsive page!</p>
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
     <form>
  <div class="form-group">
    <label for="email1">Email address</label>
    <input type="email" class="form-control" id="email1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div> 
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    </div>
  </div>
</div>
</body>
</html>

See Live Example