Use any of the available button classes to quickly create a styled button.
Default Primary Success Info Warning Danger Link
<!-- Standard button -->
<button type= "button" class= "btn btn-default" > Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type= "button" class= "btn btn-primary" > Primary</button>
<!-- Indicates a successful or positive action -->
<button type= "button" class= "btn btn-success" > Success</button>
<!-- Contextual button for informational alert messages -->
<button type= "button" class= "btn btn-info" > Info</button>
<!-- Indicates caution should be taken with this action -->
<button type= "button" class= "btn btn-warning" > Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type= "button" class= "btn btn-danger" > Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type= "button" class= "btn btn-link" > Link</button>
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
Large button Large button
Default button Default button
Small button Small button
Extra small button Extra small button
<p>
<button type= "button" class= "btn btn-primary btn-lg" > Large button</button>
<button type= "button" class= "btn btn-default btn-lg" > Large button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary" > Default button</button>
<button type= "button" class= "btn btn-default" > Default button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary btn-sm" > Small button</button>
<button type= "button" class= "btn btn-default btn-sm" > Small button</button>
</p>
<p>
<button type= "button" class= "btn btn-primary btn-xs" > Extra small button</button>
<button type= "button" class= "btn btn-default btn-xs" > Extra small button</button>
</p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
Block level button Block level button
<button type= "button" class= "btn btn-primary btn-lg btn-block" > Block level button</button>
<button type= "button" class= "btn btn-default btn-lg btn-block" > Block level button</button>
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active <button>s should you need to replicate the active state progammatically.
Button element
No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.
Primary button Button
<button type= "button" class= "btn btn-primary btn-lg active" > Primary button</button>
<button type= "button" class= "btn btn-default btn-lg active" > Button</button>
Anchor element
Add the .active class to <a> buttons.
Primary link Link
<a href= "#" class= "btn btn-primary btn-lg active" role= "button" > Primary link</a>
<a href= "#" class= "btn btn-default btn-lg active" role= "button" > Link</a>
Make buttons look unclickable by fading them back 50%.
Button element
Add the disabled attribute to <button> buttons.
Primary button Button
<button type= "button" class= "btn btn-lg btn-primary" disabled= "disabled" > Primary button</button>
<button type= "button" class= "btn btn-default btn-lg" disabled= "disabled" > Button</button>
Cross-browser compatibility
If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.
Anchor element
Add the .disabled class to <a> buttons.
Primary link Link
<a href= "#" class= "btn btn-primary btn-lg disabled" role= "button" > Primary link</a>
<a href= "#" class= "btn btn-default btn-lg disabled" role= "button" > Link</a>
We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
Link functionality not impacted
This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.
Context-specific usage
While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.
Use the button classes on an <a>, <button>, or <input> element.
<a class= "btn btn-default" href= "#" role= "button" > Link</a>
<button class= "btn btn-default" type= "submit" > Button</button>
<input class= "btn btn-default" type= "button" value= "Input" >
<input class= "btn btn-default" type= "submit" value= "Submit" >
Cross-browser rendering
As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.
Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.
