Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Example
btn-{name} for various btn options. <button type="button" class="btn btn-primary">Primary</button>Button tags
The .btn classes are designed to be used with the button element. However, you can also use these classes on a or input elements (though some browsers may apply a slightly different rendering).
<ul class="d-flex flex-wrap gap g-3"> <li><a class="btn btn-primary" href="#" role="button">Link</a></li> <li> <button class="btn btn-primary" type="submit">Button</button></li> <li><input class="btn btn-primary" type="button" value="Input"></li> <li> <input class="btn btn-primary" type="submit" value="Submit"></li> <li><input class="btn btn-primary" type="reset" value="Reset"></li></ul>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>Soft buttons
In need of a button, but not the hefty background colors they bring? Add modifier classes with the .btn-soft ones to soften background colors on any button.
<button type="button" class="btn btn-soft btn-primary">Primary</button>Soft Outline buttons
In need of a button, but not the hefty background colors they bring? Add modifier classes with the .btn-soft ones to soften background colors on any button.
<button type="button" class="btn btn-soft btn-outline-primary">Primary</button>Buttons with Icons
Try with flowing code examples to use icons in buttons
<button type="button" class="btn btn-primary"><em class="icon ni ni-arrow-left"></em> <span>Left Icon</span></button>Sizes
Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-primary">Regular button</button>Rounded Buttons
Need to soften the buttons edges? Add .rounded-pill for rounded buttons.
<button type="button" class="btn rounded-pill btn-primary">Regular button</button>Disabled state
Make buttons look inactive by adding the disabled boolean attribute to button
<button type="button" class="btn btn-primary" disabled>Primary button</button>Block buttons
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>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>
