Components

A list of basic components

Buttons

Style any element as a button, preferably a <a>,<button> or <input type="submit">. Simply add .btn class, if you want some flavour, add .btn .btn-primary

We highly recommend to use a <a> or <button> element when posible, just to enable to set a icon inside of it

Example

button default primary info success warning danger alternative inverse 

<a class="btn"              href="#">button</a>
<a class="btn btn-default"  href="#">default</a>
<a class="btn btn-primary"  href="#">primary</a>
<a class="btn btn-info"     href="#">info</a>
<a class="btn btn-success"  href="#">success</a>
<a class="btn btn-warning"  href="#">warning</a>
<a class="btn btn-danger"   href="#">danger</a>
<a class="btn btn-alt"      href="#">alternative</a>
<a class="btn btn-inverse"  href="#">inverse</a>

Button group

Useful for use as paginator, simply wrap some a .btn-group on some .btn

Also works with .label

Example

1 2 3 4 5 

<div class="btn-group">
    <a class="btn" href="#">1</a>
    <a class="btn" href="#">2</a>
    <span class="label">3</span>
    <a class="btn" href="#">4</a>
    <a class="btn" href="#">5</a>
</div>
button default primary info success warning danger alternative inverse 

<div class="btn-group">
    <a class="btn" href="#">button</a>
    <a class="btn btn-default"  href="#">default</a>
    <a class="btn btn-primary"  href="#">primary</a>
    <a class="btn btn-info"     href="#">info</a>
    <a class="btn btn-success"  href="#">success</a>
    <a class="btn btn-warning"  href="#">warning</a>
    <a class="btn btn-danger"   href="#">danger</a>
    <a class="btn btn-alt"      href="#">alternative</a>
    <a class="btn btn-inverse"  href="#">inverse</a>
</div>

Labels

Style any element as a label, simply add .label class, if you want some flavour, add .label .label-primary.
Useful to use as .add-on in .input-append

Example

label default primary info success warning danger alternative inverse 

<a class="label"                href="#"> label </a>
<a class="label label-default"  href="#"> default </a>
<a class="label label-primary"  href="#"> primary </a>
<a class="label label-info"     href="#"> info </a>
<a class="label label-success"  href="#"> success </a>
<a class="label label-warning"  href="#"> warning </a>
<a class="label label-danger"   href="#"> danger </a>
<a class="label label-alt"      href="#"> alternative </a>
<a class="label label-inverse"  href="#"> inverse </a>

Badges

Highlight elements using a badge, simply add .badge class, if you want some flavour, add .badge .badge-primary

Is auto collapsible using :empty but will not collapse on IE8 because has no :empty support. For a better practice just print or not when has notifications

Example

badge default primary info success warning danger alternative inverse 

<a class="badge"                href="#"> badge </a>
<a class="badge badge-default"  href="#"> default </a>
<a class="badge badge-primary"  href="#"> primary </a>
<a class="badge badge-info"     href="#"> info </a>
<a class="badge badge-success"  href="#"> success </a>
<a class="badge badge-warning"  href="#"> warning </a>
<a class="badge badge-danger"   href="#"> danger </a>
<a class="badge badge-alt"      href="#"> alternative </a>
<a class="badge badge-inverse"  href="#"> inverse </a>
For displaying notifications you can use it on a <sup> or <sub> tag

Example

Example 2 Example 2 Example 2 

<span class="label">
    Example
    <sup class="badge badge-danger" href="#">2</sup>
</span>
<span class="label">
    Example
    <span class="badge badge-danger " href="#">2</span>
</span>
<span class="label">
    Example
    <sub class="badge badge-danger" href="#">2</sub>
</span>

Messages

Style any element as a message, simply add .message class, if you want some flavour, add .message .message-primary

Example

message
default
primary
info
success
warning
danger
alternative
inverse

<div class="message"                 > message </div>
<div class="message message-default" > default </div>
<div class="message message-primary" > primary </div>
<div class="message message-info"    > info </div>
<div class="message message-success" > success </div>
<div class="message message-warning" > warning </div>
<div class="message message-danger"  > danger </div>
<div class="message message-alt"     > alternative </div>
<div class="message message-inverse" > inverse </div>