Grid
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled.
With the responsive CSS file added, the grid adapts to be 724px. Below 767px viewports, the columns become fluid and stack vertically.
Basic grid HTML
For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).<div class="row"> <div class="span8">...</div> <div class="span4">...</div> </div>
Nesting columns
To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Typography
Headings
All HTML headings, <h1> through <h6> are available.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Emphasis classes
Convey meaning through color with a handful of emphasis utility classes.
Theme default
Donec ullamcorper nulla non metus fringilla.
<p> Donec ullamcorper <span class="color"> nulla non metus </span> fringilla.</p>
From bootstrap
1. Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
2. Etiam porta sem malesuada magna mollis euismod.
3. Donec ullamcorper nulla non metus auctor fringilla.
4. Aenean eu leo quam. Pellentesque ornare sem quam venenatis.
5. Duis mollis, non commodo luctus erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem quam venenatis.</p> <p class="text-success">Duis mollis, non commodo luctus erat porttitor ligula.</p>
Blockquotes
For quoting blocks of content from another source within your document.
Default blockquote
Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
Blockquote options
Style and content changes for simple variations on a standard blockquote.
Naming a source
Add <small> tag for identifying the source.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere a ante.</p> <small>Someone famous in Source Title</small> </blockquote>
Alternate displays
Use .pull-right for a floated, right-aligned blockquote.
<blockquote class="pull-right"> ... </blockquote>
List styles
Unordered
A list of items in which the order does not explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
<ul class="list-unordered">
<li>Some text</li>
<li>Some text
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</li>
<li>Some text</li>
<li>Some text</li>
</ul>
Ordered
A list of items in which the order does explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
<ol class="list-ordered">
<li>Some text</li>
<li>Some text
<ul>
<li>Some text</li>
<li>Some text</li>
<li>Some text</li>
</ul>
</li>
<li>Some text</li>
<li>Some text</li>
</ol>
Checkmark list
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
<ul class="list-checkmark"> <li>Some text</li> <li>Some text</li> </ul>
Unstyled list
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Nulla volutpat aliquam velit
<ul class="list-unstyled"> <li>Some text</li> <li>Some text</li> <li>Some text</li> </ul>
Image styles
Image to left
Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber. Nam dolor ligula, faucibus id sodales in qui auctor fringilla libero. Pellentesque lectorum proces tempor tellus eget hendrerit dui sem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant autem sollemnes in futurum velit esse possim molestie consequat.
<img src="img/preview/thumb-1.jpg" alt="image" class="img-left"> <p>Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber.</p>
Image to right
Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber. Nam dolor ligula, faucibus id sodales in qui auctor fringilla libero. Pellentesque lectorum proces tempor tellus eget hendrerit dui sem. Eodem modo typi, qui nunc nobis videntur parum clari, fiant autem sollemnes in futurum velit esse possim molestie consequat.
<img src="img/preview/thumb-1.jpg" alt="image" class="img-right"> <p>Claritas est etiam processynamicus, qui quitur soluta lectorum irumtare quam littera liber.</p>
Button styles
<a href="#" class="mybtn">Link text</a>
<a href="#" class="mybtn mybtn-app"> <span class="icon-app"></span><em>Available on the</em>App Store</a>
<a href="#" class="mybtn mybtn-android"> <span class="icon-android"></span><em>Available for the</em>Android</a>
<a href="#" class="mybtn mybtn-bberry"> <span class="icon-bberry"></span><em>Download now on</em>Blackberry</a>
<a href="#" class="mybtn mybtn-gplay"> <span class="icon-gplay"></span><em>Get it on</em>Google play</a>
<a href="#" class="mybtn mybtn-windows"> <span class="icon-windows"></span><em>Download for the</em>Windows</a>
Icons
How to use
All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:
<i class="icon-search"></i>
There are also styles available for inverted (white) icons, made ready with one extra class. Bootstrap specifically enforce this class on hover and active states for nav and dropdown links.
<i class="icon-tags icon-white"></i>
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Table styles
Simple table with hover
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-hover">
<thead>
<tr>
<th>Some text</th>
<th>Some text</th>
<th>Some text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
Striped table with hover
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Some text</th>
<th>Some text</th>
<th>Some text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
Bordered table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">
<thead>
<tr>
<th>Some text</th>
<th>Some text</th>
<th>Some text</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>