Bootstrap 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>
Like default buttons but still want something cooler? Use .btn-style-light
to make them lighter.
.btn-style-light
class.
<button type="button" class="btn btn-primary btn-style-light">Primary</button>
<button type="button" class="btn btn-success btn-style-light">Success</button>
<button type="button" class="btn btn-danger btn-style-light">Danger</button>
<button type="button" class="btn btn-warning btn-style-light">Warning</button>
<button type="button" class="btn btn-info btn-style-light">Info</button>
<button type="button" class="btn btn-dark btn-style-light">Dark</button>
Google Material Design's burger button example.
<button type="button" class="btn btn-primary btn-burger><i class="material-icons">add</i></button>
<button type="button" class="btn btn-danger btn-burger"><i class="material-icons">delete_outline</i></button>
<button type="button" class="btn btn-success btn-burger"><i class="material-icons">share</i></button>
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
Use icons inside buttons to make them more user-friendly.
<button type="button" class="btn btn-primary"><i class="material-icons">add</i>Add</button>
<button type="button" class="btn btn-danger"><i class="material-icons">delete_outline</i>Remove</button>
<button type="button" class="btn btn-success"><i class="material-icons-outlined">file_download</i>Download</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-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>
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element. Disabled buttons have pointer-events: none
applied to, preventing hover and active states from triggering.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6
. Center it horizontally with .mx-auto
, too.
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Round corners easily by adding .btn-rounded
.
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-light btn-rounded">Light</button>
<button type="button" class="btn btn-dark btn-rounded">Dark</button>