Buttons

Default buttons

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 for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative 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
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

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

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

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

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

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to < a > buttons.

Primary link Link 

  1. < a href="#" class="btn btn-large btn-primary disabled" >Primary link< /a >
  2. < a href="#" class="btn btn-large disabled" >Link< /a >

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to < button > buttons.

  1. < button type="button" class="btn btn-large btn-primary disabled" disabled="disabled" >Primary button< /button >
  2. < button type="button" class="btn btn-large" disabled >Button< /button >

One class, multiple tags

Use the .btn class on an < a >, < button >, or < input > element.

Link 
  1. < a class="btn" href="" >Link< /a >
  2. < button class="btn" type="submit" >Button< /button >
  3. < input class="btn" type="button" value="Input" >
  4. < input class="btn" type="submit" value="Submit" >

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an < input type="submit" > for your button.

Single button group

Wrap a series of buttons with .btn in .btn-group.

  1. < div class="btn-group" >
  2.   < button class="btn" >Left< /button >
  3.   < button class="btn" >Middle< /button >
  4.   < button class="btn" >Right< /button >
  5. < /div >

Multiple button groups

Combine sets of < div class="btn-group" > into a < div class="btn-toolbar" > for more complex components.

Vertical button groups

  1. < div class="btn-group btn-group-vertical" >
  2.   ...
  3. < /div >

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.