Buttons

Vanilla Buttons

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-transparent">Transparent</button>

Transparent Colored Buttons

Valid colors are blue, white, bright-blue, green, yellow, red, salmon, and orange

<div style="padding: 10px;">
<button type="button" class="btn btn-transparent-blue">Blue</button>
<button type="button" class="btn btn-transparent-white">White</button>
<button type="button" class="btn btn-transparent-bright-blue">Bright Blue</button>
<button type="button" class="btn btn-transparent-green">Green</button>
<button type="button" class="btn btn-transparent-yellow">Yellow</button>
<button type="button" class="btn btn-transparent-red">Red</button>
<button type="button" class="btn btn-transparent-salmon">Salmon</button>
<button type="button" class="btn btn-transparent-orange">Orange</button>
</div>

Large Buttons

<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>

Small Buttons

<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>

Extra Small Buttons

<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>

Buttons with text and icons

You can use font awesome icons within a button. The btnLabel class applies a 6px left padding to the text.

<button type="button" class="btn btn-default btn">
  <span class="sr-only">Star Wars Empire</span>
  <i class="fa fa-empire"></i>
  <span class="btnLabel">Default</span>
</button>
<button type="button" class="btn btn-primary btn-lg">
  <span class="sr-only">Star Wars Rebel</span>
  <i class="fa fa-rebel"></i>
  <span class="btnLabel">Primary Large</span>
</button>

Buttons with icons

You can use font awesome icons within a button

<button type="button" class="btn btn-default">
  <span class="sr-only">Star Wars Empire</span>
  <i class="fa fa-empire"></i>
</button>
<button type="button" class="btn btn-primary btn-lg">
  <span class="sr-only">Star Wars Rebel</span>
  <i class="fa fa-rebel"></i>
</button>

Disabled Buttons

<button type="button" class="btn btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default" disabled="disabled">Button</button>

Block Buttons

A block button is as wide as its container

<div style="width: 225px">
  <button type="button" class="btn btn-primary btn-block">Primary</button>
</div>
<div style="width: 100px">
  <button type="button" class="btn btn-success btn-block">Success</button>
</div>

Split Buttons

A split button has a primary action button attached to a select dropdown that can contain additional actions.

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Split Block Buttons

Split block buttons take up 100% width of the parent container. The menu should drop down on the right. Add the btn-group-block class to the btn-group element and add pull-right to the dropdown-menu element.

<div class="btn-group btn-group-block">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu pull-right">
    <li><a href="#">Action<a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Button Group

Add as many buttons as you need to the group and the styling will connect the buttons together. The group must be using the same size buttons and can be any type of button defined above.

<div class="btn-group" role="group" aria-label="theormostatStatus">
  <button type="button" class="btn btn-info"><i class="fa fa-snowflake-o"></i> Cold</button>
  <button type="button" class="btn btn-danger"><i class="fa fa-fire"></i> Hot</button>
</div>

Button groups can be used with radio buttons too.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked>
        <div class="sr-only">Left Align</div>
        <i class="fa fa-align-left"></i>
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" autocomplete="off">
        <div class="sr-only">Center Align</div>
        <i class="fa fa-align-center"></i>
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" autocomplete="off">
        <div class="sr-only">Right Align</div>
        <i class="fa fa-align-right"></i>
    </label>
</div>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-transparent-orange active">
        <input type="radio" name="options" id="option4" autocomplete="off" checked>
        Yes
    </label>
    <label class="btn btn-transparent-orange">
        <input type="radio" name="options" id="option5" autocomplete="off">
        No
    </label>
</div>

Button with Spinners

<button type="button" class="btn btn-default"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Default</button>
<button type="button" class="btn btn-primary"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Primary</button>
<button type="button" class="btn btn-success"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Success</button>
<button type="button" class="btn btn-info"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Info</button>
<button type="button" class="btn btn-warning"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Warning</button>
<button type="button" class="btn btn-danger"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span> Danger</button>
<button type="button" class="btn btn-transparent"><i class="fa fa-circle-o-notch fa-spin"></i> <span class="sr-only">Loading...</span>Transparent</button>