Bootstrap is a popular framework for building responsive, mobile-first sites and applications. Bootstrap makes coding for responsive websites easier and faster.
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 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.
- 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
- 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:
<!-- 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:
- col-xs-[num] grids have no maximum size (fluid)
- col-sm-[num] grids resize up to 750px
- col-md-[num] grids resize up to 970px
- 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.