Buttons
Use any types of buttons in your project.
Examples
Bootstrap offers a range of pre-designed button styles, each with its own distinct semantic function, along with some additional options to provide you with greater customization and control over your buttons.
<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>
Button soft
<a class="btn btn-light-primary" href="#">Primary</a>
<a class="btn btn-gray" href="#">Dark</a>
<a class="btn btn-dark-soft" href="#">Light</a>
<a class="btn btn-whitener" href="#">Light</a>
<a class="btn btn-light-success" href="#">Success</a>
<a class="btn btn-light-danger" href="#">Danger</a>
<a class="btn btn-light-warning" href="#">Warning</a>
<a class="btn btn-light-info" href="#">Info</a>
Outline buttons
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>
Button icons and round
<a class="btn btn-primary" href="#"><i class="fas fa-info-circle me-2"></i>Primary</a>
<a class="btn btn-dark" href="#">Dark <i class="fas fa-angle-right ms-2"></i></a>
<a class="btn btn-primary btn-round btn-sm" href="#"><i class="fas fa-play"></i></a>
<a class="btn btn-primary btn-round" href="#"><i class="fas fa-play"></i></a>
<a class="btn btn-primary btn-round btn-lg" href="#"><i class="fas fa-play"></i></a>
Button with avatar
<div class="avatar avatar-md z-index-1 position-relative me-2">
<img class="avatar-img rounded-circle" src="assets/images/avatar/12.jpg" alt="avatar">
<!-- Video button -->
<div class="btn btn-xs btn-round btn-white shadow-sm position-absolute top-50 start-50 translate-middle z-index-9 mb-0">
<i class="fas fa-play"></i>
</div>
</div>
Button sizes
<a class="btn btn-primary btn-xs" href="#">x Small</a>
<a class="btn btn-primary btn-sm" href="#">Small</a>
<a class="btn btn-primary" href="#">Default</a>
<a class="btn btn-primary btn-lg" href="#">Large</a>
Disabled state
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>
Block buttons
Generate responsive stacks of full-width "block buttons," similar to the ones found in Bootstrap 5, by combining our display and gap utility classes. Leveraging these utilities instead of specific button classes grants us enhanced control over spacing, alignment, and responsiveness for a tailored button layout.
<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>
In this example, we craft a responsive adaptation that begins with buttons stacked vertically. This layout persists until the md breakpoint is reached, at which point we replace the d-grid class with d-md-block effectively eliminating the gap-2 utility. Feel free to resize your browser to observe these changes in action.
You can further fine-tune the horizontal alignment of buttons using additional utilities. In our previous responsive example, we've introduced some flex utilities and applied a margin utility to align the buttons to the right when they are no longer in a stacked configuration. This allows for precise control over button alignment as your layout changes.
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>