Home  /  Features  /  Buttons
Button class="" Description
Default btn Standard gray button with gradient
Primary btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
Info btn btn-info Used as an alternative to the default styles
Success btn btn-success Indicates a successful or positive action
Warning btn btn-warning Indicates caution should be taken with this action
Danger btn btn-danger Indicates a dangerous or potentially negative action
Inverse btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
Link btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Button sizes

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

  1. <p>
  2. <a class="btn btn-large btn-primary" type="button">Large button</a>
  3. <a class="btn btn-large" type="button">Large button</a>
  4. </p>
  5. <p>
  6. <a class="btn btn-primary" type="button">Default button</a>
  7. <a class="btn" type="button">Default button</a>
  8. </p>
  9. <p>
  10. <a class="btn btn-small btn-primary" type="button">Small button</a>
  11. <a class="btn btn-small" type="button">Small button</a>
  12. </p>
  13. <p>
  14. <a class="btn btn-mini btn-primary" type="button">Mini button</a>
  15. <a class="btn btn-mini" type="button">Mini button</a>
  16. </p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

  1. <a class="btn btn-large btn-block btn-primary" type="button">Block level button</a>
  2. <a class="btn btn-large btn-block" type="button">Block level button</a>