Introduction of Bootstrap Framework

Bootstrap is the world's one of the most popular and responsive framework for developing web pages and web applications. It is completely free to download and it is based on Html, CSS and JavaScript framework. It gives you the ability to create responsive layouts with much less effort. Bootstrap is extensively used and has gained popularity among the new age coders who develop websites and web pages. It was originally known by a twitter name which was later on changed to Bootstrap.

Bootstrap is front-end HTML, CSS and JavaScript framework to web design and development. It is free to use and available for download. Bootstrap enables the user to create layout without making much efforts.

Brief History about Bootstrap

Bootstrap was originally created at Twitter in the year 2010. Earlier it was known as Twitter Blueprint and later on became open source framework. It was later released on 19th Aug 2011 and since then twenty releases have been made with two major versions v2 and v3. In Bootstrap 2, responsive functionality was added to framework while in Bootstrap3, complete library was rewritten to make it more mobile approach.

In June 2014 Bootstrap was the No.1 project on GitHub.

Why Use Bootstrap?

Since the inception of open source framework Bootstrap, it is becoming increasingly popular for developers and designers and continues to be on board. One of the major reasons for using Bootstrap is because of popularity of its usage in Twitter which grew its popularity further. Usage of customizable and fast Bootstrap framework innovation helped Twitter hit the design and development arena.

As bootstrap was open source and free to access for designers, it helped in creating websites and applications quite faster and better compared to other frameworks. It is considered to be a candy store for the web designers and developers which offer various tools and customizations.


Following are the main advantage of Bootstrap:

  • It is very easy to use. Anyone having basic knowledge of HTML and CSS can use Bootstrap.
  • It simplifies users to improve a responsive website.
  • It is well-matched on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera etc.

Create First Web Page With Bootstrap 3

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title> Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script> 
</head> 
<body> 
<div class="container"> 
  <div class="jumbotron"> 
    <h1> My First Bootstrap Page</h1> 
    <p> Resize this responsive page to see the effect!</p>  
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> 
      <h3> Column 1</h3> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
    </div> 
    <div class="col-sm-4"> 
      <h3> Column 2</h3> 
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
    </div> 
    <div class="col-sm-4"> 
      <h3> Column 3</h3>         
   <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 
    </div> 
  </div> 
</div> 
</body> 
</html> 

What Bootstrap package contains

  • Support: Bootstrap provides a basic construction with Grid System, link styles, and background.
  • CSS: Bootstrap comes with the feature of global CSS settings, important HTML elements style and an advanced grid system.
  • Components: Bootstrap holds a lot of reusable mechanisms built to provide iconography, dropdowns, navigation, alerts, pop-overs, and much more.
  • JavaScript Plugins: Bootstrap also holds a lot of custom jQuery plugins. You can simply include them all, or one by one.