Shortcodes

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.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

<blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</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	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden