Home Shortcodes

Shortcodes

Buttons

btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse

Button sizes

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

Add .btn-large, .btn-small, or .btn-mini.

Button dropdown menus

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Inline labels

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>

Badges

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>
Error 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>

Alerts

× Warning! Best check yo self, you're not looking too good.

<div class="alert">
  ...
</div>
× Oh snap! Change a few things up and try submitting again. 
<div class="alert alert-error">
  ...
</div>
× Well done! You successfully read this important alert message. 
<div class="alert alert-success">
  ...
</div>
× Heads up! This alert needs your attention, but it's not super important. 
<div class="alert alert-info">
  ...
</div>

Image styles

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Button group

Wrap a series of buttons with .btn in .btn-group.

<div class="btn-group">
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
</div>

Pagination

Add .disabled for unclickable links and .active for current page.

Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

<div class="pagination">
  <ul>
    <li><a href="#">Prev</a></li>
    <li class="active">
      <a href="#">1</a>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</div>

Pagers

The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.

Pager links also use the general .disabled class from the pagination.

<ul class="pager">
  <li>
    <a href="#">Previous</a>
  </li>
  <li>
    <a href="#">Next</a>
  </li>
</ul>
<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  </li>
  <li class="next">
    <a href="#">Newer &rarr;</a>
  </li>
</ul>

Progress bars

<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
</div>
<div class="progress progress-striped
     active">
  <div class="bar"
       style="width: 40%;"></div>
</div>

Table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

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