Button

Use our custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations.

Examples

TheDocs includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.



<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Markup
Copy

Outline buttons

Use .btn-outline-* with a contextual color to remove all background colors on any button.



<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Markup
Copy

Round buttons

You can have a round buttons by adding .btn-round to a .btn.



<button type="button" class="btn btn-primary btn-round">Primary</button>
<button type="button" class="btn btn-secondary btn-round">Secondary</button>
<button type="button" class="btn btn-success btn-round">Success</button>
<button type="button" class="btn btn-danger btn-round">Danger</button>
<button type="button" class="btn btn-warning btn-round">Warning</button>
<button type="button" class="btn btn-info btn-round">Info</button>
<button type="button" class="btn btn-light btn-round">Light</button>
<button type="button" class="btn btn-dark btn-round">Dark</button>
Markup
Copy

Sizes

We have five size for buttons, from extra small to extra large.

<button type="button" class="btn btn-primary btn-xs">Extra small</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-xl">Extra large</button>
Markup
Copy