What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components. Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Bootstrap is an easy to learn and easy to use framework that works great for all devices. Bootstrap was created to make it easy to mobilize and customize mobile front end web development.

How Does it Work?

Bootstrap uses a 12 grid system. This means that each “container” or “row” has to equal 12. For example: two columns of 6 or three columns of 4.  Each container can be different and unique for which ever size you need. If you need one big header you can choose to use a 12 in the “row” div. Or if you want to showcase 6 pictures lined up next to each other, you can put 2 in the “row”. When using bootstrap, it is very important to make sure that each row equals 12. This aspect is what makes bootstrap. . . bootstrap.

Example of Bootstrap

<div class=”container-fluid”>
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>This is a bootstrap example</p>
<div class=”row”>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavenderblush;”>.col-sm-4</div>
<div class=”col-sm-4″ style=”background-color:lavender;”>.col-sm-4</div>
</div>
</div>

 

Copy and paste this into any editor and see the magic of bootstrap!