Buttons
Default Buttons
Use the button classes on an <a>,
<button>, or <input> element.
Button Outline
Use a classes .btn-outline-** to quickly
create a bordered buttons.
Button Rounded
Add .rounded-pill to default button to get
rounded corners.
Button Outline Rounded
Use a classes .btn-outline-** to quickly
create a bordered buttons.
Button-Sizes
Add .btn-lg, .btn-sm for additional sizes.
Button-Disabled
Add the disabled attribute to <button> buttons.
Icon Buttons
Icon only button.
Block Button
Create block level buttons by adding class .d-grid to parent div.
Button Group
Wrap a series of buttons with .btn in .btn-group.
Toggle Button
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 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).