Bootstrap is a popular framework for building responsive, mobile-first sites and applications. Bootstrap makes coding for responsive websites easier and faster.

Why Bootstrap?

Bootstrap offers you a tried and tested, cross-browser, easy to use code instead of spending hours in writing your own CSS.

What is Bootstrap?

  • Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
  • Bootstrap makes front-end web development faster and easier. It’s made for all skill levels, devices of all resolutions, and projects of all sizes
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  • Bootstrap easily and efficiently scales your websites and applications with the same code base, from phones to tablets to desktops

How to install Bootstrap?

  • Install with Bower – $ bower install bootstrap
  • Install with npm – $ npm install bootstrap@3

What is Responsive Web Design?

            Responsive web design is about creating websites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Pros:

  • Easy to use: With just basic knowledge of HTML and CSS can start using Bootstrap
  • Responsive features: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops
  • Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
  • Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
  • It includes glyphicons, where there are hundreds of familiar icons like user, security, admin etc
  • Good documentation and community support
  • A lot of free & professional templates, themes and plugins are available

Cons:

  • Websites can start to look the same if you don’t customize the styles and colors much
  • It uses jQuery
  • Layout grid will need over-riding if you want a fixed width column, like for advertising

The grid layout:

Bootstrap-grid

Sample  grid:

<!-- every row must have 12 columns --> 
<div class=”row”> 
   <div class=”col-md-4”> 
       <!-- content --> 
   </div> 
   <!-- need to complete 8 more columns --> 
</div>

Bootstrap 3 features an always-responsive grid with a maximum size:

  1. col-xs-[num] grids have no maximum size (fluid)
  2. col-sm-[num] grids resize up to 750px
  3. col-md-[num] grids resize up to 970px
  4. col-lg-[num] grids resize up to 1170px You should choose col-md or col-lg for desktop sites.

You should choose col-md or col-lg for desktop sites.

You can also use two grid sizes for different screen sizes:

<div class=”row”> 
    <div class=”col-md-4 col-xs-6”> 
        <!-- content --> 
    </div> 
    <div class=”col-md-8 col-xs-6”> 
        <!-- content --> 
    </div> 
</div>

The features like Responsive, Browser Compatibility, Default Icons & Grid layout made me use Bootstrap in most of my Apps.