Options
Use any of the available button classes to quickly create a styled button.
<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-link">Link</button>Sizes
Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button><button type="button" class="btn btn-default btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button><button type="button" class="btn btn-default">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button><button type="button" class="btn btn-default btn-sm">Small button</button>
<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>Create block level buttons—those that span the full width of a parent— by adding .btn-block.
<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
<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>
</div>Button tags
Use the button classes on an <a>, <button>, or <input> element.
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.