Home / shortcodes
Button class="" Description
btn Standard gray button with gradient
btn btn-primary Identifies the primary action in a set of buttons
btn btn-info Used as an alternate to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
Buttons for actions

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.

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.


Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.

Flexible alignment

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

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

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.

Optional disabled state

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

<ul class="pager">
    <a href="#">Previous</a>
    <a href="#">Next</a>
<ul class="pager">
  <li class="previous">
    <a href="#">&larr; Older</a>
  <li class="next">
    <a href="#">Newer &rarr;</a>
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>
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-error">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverse 10 <span class="badge badge-inverse">10</span>
× Warning! Best check yo self, you're not looking too good.

<div class="alert">
× Oh snap! Change a few things up and try submitting again.
<div class="alert alert-error">
× Well done! You successfully read this important alert message.
<div class="alert alert-success">
× Heads up! This alert needs your attention, but it's not super important.
<div class="alert alert-info">
<div class="progress">
  <div class="bar"
       style="width: 60%;"></div>
<div class="progress progress-striped">
  <div class="bar"
       style="width: 20%;"></div>
<div class="progress progress-striped
  <div class="bar"
       style="width: 40%;"></div>
Additional colors
Striped bars

Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.

If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.


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

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