Bootstrap is a CSS framework developed by Mark Otto and Jacob Thornton in 2009. It provides responsive grid system, predefined styles for typography, forms, buttons, tables, images and more. The grid system uses rows and columns to automatically resize content for different screen sizes like mobile, tablet and desktop. It has classes for offsetting, reordering and nesting columns. Bootstrap also offers various utility classes for text formatting, backgrounds, responsive images and buttons.

1. BOOTSTRAP

2. WHAT IS BOOTSTRAP??
• Developed by Mark & Auto in 2009.
• Also known as Twitter Booster.
• CSS Framework
• Used for developing Responsive website
• Responsive means as per the requirement, it changes it’s width & height.

3. GRID-SYSTEM
• Bootstrap provides the grid system i.e. Row & Column. Where Column is limited upto
12 unit, but Row is infinite.
• Grid-System has 4 classes:-
• Extra Small Devices : 320/360px - 767px ; Mobiles ; col-xs-1(upto 12)
• Small Devices : 768px - 991px ; Tablets ; col-sm-1
• Medium Devices : 992px -1199px ; Laptop ; col-md-1
• Large Devices : >=1200px ;Large Desktop ; col-lg-1

4. GRID-SYSTEM- ROWS & COLUMNS
Col-1 Col-2 Col-3 Col-4 Col-5 Col-6 Col-7 Col-8 Col-9 Col-10 Col-11 Col-12
Row2
Row3
.
.
Infinite
rows

5. GRID-SYSTEM : OFFSETTING COLUMNS
• Move columns to the right using .col-md-offset-* classes. These classes increase the
left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-
4 over four columns

6. TEXT-STYLE : 1
• Headings:-
• <h1> </h1>
• <h2> </h2>
• <h3> </h3>
• <h4> </h4>
• <h5> </h5>
• <h6> </h6>
• Small
• <small> <small>
• Blockquote
• <blockquote class=“blockquote-
reverse> </blockquote>
• Abbreviation
• <abbr title=“”> </abbr>
• Mark
• <mark> <mark>
• Definition list
<dl class=dl-horizontal>
<dt> </dt>
<dd> </dd>
</dl>
• Pre-defined
• <pre class=pre-scrollable> </pre>

7. TEXT-STYLE : 2
• Text color classes:
• text-muted : light grey white text
• text-danger : red color text
• text-success : green color text
• text-info : light blue color text
• text-primary : dark blue color text
• text-warning : orange color text
• Background Classes:
• bg-danger
• bg-success
• bg-info
• bg-primary
• bg-warning
• Other Text Styles Classes:
• text-uppercase
• text-lowercase
• text-capitalize
• text-left
• text-center
• text-right
• text-nowrap

8. TABLE
• <table class=“table”>
<th> </th>
<tr>
<td> </td
<td> </td>
</tr>
• </table>
• Other table Classes:
• table table-stripped (one grey and one white cell)
• table table-bordered
• table table-hover
• table table-condensed (reduce the margin padding of cells)
• table-responsive

9. COLOR & IMAGE CLASSES
• Color Classes
• Primary : dark blue color
• Danger : red color
• Info : light blue color
• Warning : orange color
• Success : green color
• Image Classes:
• img-rounded
• img-circle
• img-thumbnail
• img-responsive
• Main Classes:
• Container : provides some space
• Container-fluid : full width

10. BUTTONS
• btn
• Button color classes
• btn btn-default
• btn btn-primary
• btn btn-info
• btn btn-warning
• btn btn-success