Grid system

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).

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</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="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>

Blockquote

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 erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
     <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Labels and Badges

Labels Markup
Default <span class="label">Default</span>
Success <span class="label label-success">Success</span>
Warning <span class="label label-warning">Warning</span>
Important <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverse <span class="label label-inverse">Inverse</span>
Name Example Markup
Default 1 <span class="badge">1</span>
Success 2 <span class="badge badge-success">2</span>
Warning 4 <span class="badge badge-warning">4</span>
Important 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>

Collapse

Collapsible Group Item #1
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Collapsible Group Item #2
Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumend.
Collapsible Group Item #3
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Class 'in' to the collapsible div which is expected to be closed on page load.
<div id="collapseOne" class="accordion-body collapse in"> 
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Alerts

Default alert
Warning! Best check yo self, you're not looking too good. 
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Warning! Best check yo self, you're not looking too good. 
<div class="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Success
Well done! You successfully read this important alert message. 
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
Well done! You successfully read this important alert message. 
<div class="alert alert-success">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
Error
Warning! Best check yo self, you're not looking too good. 
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Warning! Best check yo self, you're not looking too good. 
<div class="alert alert-error">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Info
Heads up! This alert needs attention, but it's not super important. 
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Heads up!</strong> This alert needs attention, but it's not super important.
</div>
Heads up! This alert needs your attention, but it's not super important. 
<div class="alert alert-info">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

Responsive utility classes

Class Phones 767px and below Tablets 979px to 768px Desktops Default
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible