bootstrap 3 tutorial bootstrap documentation

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