Menu


            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.

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button 

  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.

Block level button Block level button 
  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>