Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. If you want to see how to use all button capabilities, check out our Bootstrap 4 buttons tutorial.
The .btn class is intended to be applied mainly to <button>s, but it can be used with anything including anchors, button input types, submit buttons or even reset inputs.
<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-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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and 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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
To create pill shaped buttons you can use the .btn-pill utility class.
<button type="button" class="btn btn-primary btn-pill">Primary</button>
<button type="button" class="btn btn-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-success btn-pill">Success</button>
<button type="button" class="btn btn-info btn-pill">Info</button>
<button type="button" class="btn btn-warning btn-pill">Warning</button>
<button type="button" class="btn btn-danger btn-pill">Danger</button>
<button type="button" class="btn btn-light btn-pill">Light</button>
<button type="button" class="btn btn-dark btn-pill">Dark</button>
<button type="button" class="btn btn-outline-primary btn-pill">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-pill">Secondary</button>
<button type="button" class="btn btn-outline-success btn-pill">Success</button>
<button type="button" class="btn btn-outline-info btn-pill">Info</button>
<button type="button" class="btn btn-outline-warning btn-pill">Warning</button>
<button type="button" class="btn btn-outline-danger btn-pill">Danger</button>
<button type="button" class="btn btn-outline-light btn-pill">Light</button>
<button type="button" class="btn btn-outline-dark btn-pill">Dark</button>
The button sizes available in Bootstrap 4 are also available in Shards. You can change a button’s size by using either the .btn-lg or the .btn-sm class.
<button type="button" class="btn btn-danger btn-lg">Large button</button>
<button type="button" class="btn btn-outline-danger btn-icon btn-lg"><i class="fas fa-heart"></i></button>
<button type="button" class="btn btn-danger">Default button</button>
<button type="button" class="btn btn-outline-danger btn-icon"><i class="fas fa-heart"></i></button>
<button type="button" class="btn btn-danger btn-sm">Small button</button>
<button type="button" class="btn btn-outline-danger btn-icon btn-sm"><i class="fas fa-heart"></i></button>