Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
states,
and more.
Read the official
Bootstrap Documentation for a full list of
instructions
and other options.
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-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a button, but with light background colors? Replace the default modifier classes with the
.btn-label-*.
<button type="button" class="btn btn-label-primary">Primary</button>
<button type="button" class="btn btn-label-secondary">Secondary</button>
<button type="button" class="btn btn-label-success">Success</button>
<button type="button" class="btn btn-label-danger">Danger</button>
<button type="button" class="btn btn-label-warning">Warning</button>
<button type="button" class="btn btn-label-info">Info</button>
<button type="button" class="btn btn-label-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-label-{value}"
|
primary | secondary | success | danger | warning | info | dark |
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-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-outline-{value}"
|
primary | secondary | success | danger | warning | info | dark |
In need of a button, but not the hefty background and border colors they bring? Replace the default modifier classes with
the
.btn-text-* ones to remove all background images and colors on any
button.
<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-dark">Dark</button>| Class | Value |
|---|---|
class="btn btn-text-{value}"
|
primary | secondary | success | danger | warning | info | dark |
Just add extra class .rounded-pill to create rounded buttons.
<button type="button" class="btn rounded-pill me-2 btn-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-dark">Dark</button>
<button type="button" class="btn rounded-pill me-2 btn-label-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-label-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-label-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-label-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-label-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-label-dark">Dark</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill me-2 btn-outline-dark">Dark</button>Icon Default
<button type="button" class="btn btn-primary me-2">
<span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-secondary me-2">
<span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>
<button type="button" class="btn btn-label-primary me-2">
<span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-label-secondary me-2">
<span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>
<button type="button" class="btn btn-outline-primary me-2">
<span class="tf-icons ri-checkbox-circle-line ri-16px me-2"></span> Primary
</button>
<button type="button" class="btn btn-outline-secondary me-2">
<span class="tf-icons ri-notification-4-line ri-16px me-2"></span> Secondary
</button>
Icon Only
Make icon buttons by adding only icon and add class .btn-icon. Use any icon as per your preference.
<button type="button" class="btn btn-icon me-2 btn-primary">
<span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-secondary">
<span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-primary">
<span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-secondary">
<span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-primary">
<span class="tf-icons ri-checkbox-circle-line ri-22px"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-secondary">
<span class="tf-icons ri-notification-4-line ri-22px"></span>
</button>Create social icons by using respective social media class as mentioned in below table.
You can also create rounded social buttons by using .rounded-pill class, label social button by
using
.btn-label-{value} class, outline social buttons by using .btn-outline-{value} class and text social buttons by using .btn-text-{value}
class.
<button type="button" class="btn btn-facebook">
<i class="tf-icons ri-facebook-fill ri-16px me-2"></i> Facebook
</button>
<button type="button" class="btn btn-twitter">
<i class="tf-icons ri-twitter-fill ri-16px me-2"></i> Twitter
</button>
<button type="button" class="btn btn-google-plus">
<i class="tf-icons ri-google-fill ri-16px me-2"></i> Google+
</button>
<button type="button" class="btn btn-instagram">
<i class="tf-icons ri-instagram-line ri-16px me-2"></i> Instagram
</button>
<button type="button" class="btn btn-linkedin">
<i class="tf-icons ri-linkedin-box-fill ri-16px me-2"></i> Linkedin
</button>
<button type="button" class="btn btn-github">
<i class="tf-icons ri-github-fill ri-16px me-2"></i> Github
</button>
<button type="button" class="btn btn-whatsapp">
<i class="tf-icons ri-whatsapp-line ri-16px me-2"></i> WhatsApp
</button>
<button type="button" class="btn btn-pinterest">
<i class="tf-icons ri-pinterest-fill ri-16px me-2"></i> Pinterest
</button>
<button type="button" class="btn btn-slack">
<i class="tf-icons ri-slack-line ri-16px me-2"></i> Slack
</button>
<button type="button" class="btn btn-reddit">
<i class="tf-icons ri-reddit-fill ri-16px me-2"></i> Reddit
</button>
<button type="button" class="btn btn-youtube">
<i class="tf-icons ri-youtube-fill ri-16px me-2"></i> Youtube
</button>
<button type="button" class="btn btn-vimeo">
<i class="tf-icons ri-vimeo-fill ri-16px me-2"></i> Vimeo
</button>| Class | Value |
|---|---|
class="btn btn-{value}"
|
facebook | twitter | google-plus | instagram | linkedin | github | whatsapp | pinterest | slack | reddit | youtube | vimeo |
Fancy larger or smaller buttons? Add .btn-xl, .btn-lg, .btn-sm or
.btn-xs for additional sizes.
<button type="button" class="btn btn-xl btn-primary">Button xl</button>
<button type="button" class="btn btn-lg btn-primary">Button lg</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button sm</button>
<button type="button" class="btn btn-xs btn-primary">Button xs</button>| Class | Value |
|---|---|
class="btn btn-primary btn-{value}"
|
xl | lg | sm | xs |
Create responsive stacks of full-width, “block buttons” with a mix of our display and gap utilities.
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to buttons as they use a pseudo-class.
However, you can still force the same active appearance with .active (and
include the aria-pressed="true" attribute) should you need to replicate the state
programmatically.
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary active" role="button" aria-pressed="true">Link</a>
Make buttons look inactive by adding the disabled boolean attribute to
any
<button> element.
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
The button plugin allows you to create simple on/off toggle buttons.
Toggle states
Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies.
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>Toggle buttons
Create button-like checkboxes and radio buttons by using .btn styles rather than .form-check-label on the <label> elements. These toggle buttons can further be grouped in a button group if needed.
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-2" checked>
<label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-3" checked>
<label class="btn btn-primary" for="btn-check-3">Checked</label>
</div>Checkbox and radio button groups
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div><div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>