Leverage Bootstrap’s custom button styles to handle actions in forms, dialogs, and beyond, with built-in support for various sizes, states, and more. For detailed instructions and additional options, refer to the official Bootstrap Documentation
Bootstrap includes several button variants, 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 |
This loop dynamically generates customizable button styles, enabling you to effortlessly define unique classes and colors for your buttons.
@each $state in map-keys($custom-theme-colors) {
.btn-#{$state} {
--#{$prefix}btn-bg: var(--#{$prefix}#{$state});
--#{$prefix}btn-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-border-color: var(--#{$prefix}#{$state});
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-hover-bg: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-hover-bg-shade-amount}, var(--#{$prefix}#{$state}));
--#{$prefix}btn-hover-border-color: var(--#{$prefix}btn-hover-bg);
--#{$prefix}btn-active-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-active-bg: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-active-bg-shade-amount}, var(--#{$prefix}#{$state}));
--#{$prefix}btn-active-border-color: var(--#{$prefix}btn-active-bg);
--#{$prefix}btn-box-shadow-rgb: var(--#{$prefix}#{$state}-rgb);
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$state}-contrast);
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$state});
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$state});
--#{$prefix}btn-group-border-color: color-mix(in sRGB, #{$color-contrast-dark} #{$btn-active-bg-shade-amount}, var(--#{$prefix}#{$state}));
}
}
Need a button with light background colors? Simply swap the default modifier classes with
.btn-label-* for a lighter look.
<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 |
Looking for a button without the heavy background and border colors? Replace the default modifier classes
with .btn-outline-* to remove all background images and colors,
giving your button a minimalistic style.
<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="icon-base bx bx-pie-chart-alt me-1"></span>Primary
</button>
<button type="button" class="btn btn-secondary me-2">
<span class="icon-base bx bx-bell me-1"></span>Secondary
</button>
<button type="button" class="btn btn-label-primary me-2">
<span class="icon-base bx bx-pie-chart-alt me-1"></span>Primary
</button>
<button type="button" class="btn btn-label-secondary me-2">
<span class="icon-base bx bx-bell me-1"></span>Secondary
</button>
<button type="button" class="btn btn-outline-primary me-2">
<span class="icon-base bx bx-pie-chart-alt me-1"></span>Primary
</button>
<button type="button" class="btn btn-outline-secondary me-2">
<span class="icon-base bx bx-bell me-1"></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="icon-base bx bx-pie-chart-alt"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-secondary">
<span class="icon-base bx bx-bell"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-primary">
<span class="icon-base bx bx-pie-chart-alt"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-label-secondary">
<span class="icon-base bx bx-bell"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-primary">
<span class="icon-base bx bx-pie-chart-alt"></span>
</button>
<button type="button" class="btn btn-icon me-2 btn-outline-secondary">
<span class="icon-base bx bx-bell"></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 and outline social buttons by using
.btn-outline-{value}
class.
<button type="button" class="btn btn-facebook">
<i class="icon-base bx bxl-facebook me-1"></i> Facebook
</button>
<button type="button" class="btn btn-twitter">
<i class="icon-base bx bxl-twitter me-1"></i> Twitter
</button>
<button type="button" class="btn btn-google-plus">
<i class="icon-base bx bxl-google-plus me-1"></i> Google+
</button>
<button type="button" class="btn btn-instagram">
<i class="icon-base bx bxl-instagram me-1"></i> Instagram
</button>
<button type="button" class="btn btn-linkedin">
<i class="icon-base bx bxl-linkedin me-1"></i> Linkedin
</button>
<button type="button" class="btn btn-github">
<i class="icon-base bx bxl-github me-1"></i> Github
</button>
<button type="button" class="btn btn-dribbble">
<i class="icon-base bx bxl-dribbble me-1"></i> Dribbble
</button>
<button type="button" class="btn btn-pinterest">
<i class="icon-base bx bxl-pinterest me-1"></i> Pinterest
</button>
<button type="button" class="btn btn-slack">
<i class="icon-base bx bxl-slack me-1"></i> Slack
</button>
<button type="button" class="btn btn-reddit">
<i class="icon-base bx bxl-reddit me-1"></i> Reddit
</button>
<button type="button" class="btn btn-youtube">
<i class="icon-base bx bxl-youtube me-1"></i> Youtube
</button>
<button type="button" class="btn btn-vimeo">
<i class="icon-base bx bxl-vimeo me-1"></i> Vimeo
</button>| Class | Value |
|---|---|
class="btn btn-{value}"
|
facebook | twitter | google-plus | instagram | linkedin | github | dribbble | pinterest | slack | reddit | youtube | vimeo |
Want larger or smaller buttons? Use .btn-xl, .btn-lg, .btn-sm or
.btn-xs to easily adjust the button size to your needs.
<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, full-width “block buttons” by combining Bootstrap's display and gap utilities for flexible, stackable layouts.
Buttons will display as pressed (with a darker background, border, and inset shadow) when active, using a pseudo-class, so no additional class is required.
However, if you need to programmatically replicate this state, you can manually apply the
.active class along with the
aria-pressed="true" attribute.
<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>
To make buttons appear inactive, simply add the disabled boolean
attribute to any <button> element.
For <a> elements, since they don't support the disabled
attribute, apply the .disabled class to achieve the same visual
effect.
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>Vertical button-group#
<div class="btn-group-vertical" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck4" />
<label class="btn btn-outline-primary" for="btncheck4">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck5" />
<label class="btn btn-outline-primary" for="btncheck5">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck6" />
<label class="btn btn-outline-primary" for="btncheck6">Checkbox 3</label>
</div><div class="btn-group-vertical" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" checked />
<label class="btn btn-outline-primary" for="btnradio4">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio5" />
<label class="btn btn-outline-primary" for="btnradio5">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio6" />
<label class="btn btn-outline-primary" for="btnradio6">Radio 3</label>
</div>