What is bootstrap and how to use it?
Bootstrap is a open source responsive front end framework. Which provides wide range of predefined css, html and javascript components and tools to develop your web project faster.
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Now days people are crazy about smart phones and business owners and website owners want to target these mobile users for their business. With help of bootstrap you can develop complete responsive mobile friendly websites. Google search engine also consider only mobile friendly websites these days. So if you want to develop responsive website use bootstrap framework.
This is best and most popular responsive framework, there are so many components such as
Navbar, buttons, input groups, alerts, panels, forms etc and there are lot JavaScript components such as modals, closable panel , tabs etc.
How to use bootstrap:
It’s very easy and useful tool you just need to copy a sample page html code for a web page and download latest version of bootstrap from www.getbootstrap.com and extract folder to get all the files and folder from downloaded zip folder.
Includes css/bootstrap.min.css in side the <head> tag of your page and you can use your own custom css under that.
<link rel=”stylesheet” href=”css/bootstrap.min.css” type=”stylesheet”>
And it’s work with latest jquery so attach jquery file first in footer side of your web page in <body> before closing </body> tag and after jquery file attach Javascript file of bootstrap.
<script src=”js/bootstrap.min.js”></script>
And start using bootstrap and write your first responsive web project. Bootstrap contains 1000s of predefine classes of css which you can use to manage your web page and make it responsive
It starts with container_fluid class
<div class=”container_fluid”>
Write complete code of this page in side this tag
</div>
Now according to bootstrap they divided web page in rows and columns.
Use row class to create row with “div” html elements and divide this row in terms of 12 columns such as
<div class=”row”>
<div class=”col-md-6”></div>
<div class=”col-md-6”></div>
</div>
There are only 12 columns available in bootstrap which you can use to divide your web page, if you want to divide in 2 half partitions use class=”col-md-6” and if you want to divide in 4 columns use class=”col-md-3” total number of columns must be 12 and you can divide each column again in terms of 12.