Buttons
Default Buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Button-Rounded
Add .rounded-pill
to default button to get rounded corners.
Soft Buttons
Use a classes .btn-soft-**
to quickly create a soft background color buttons.
Button-Sizes
Add .btn-lg
, .btn-sm
for additional sizes.
Button Outline
Use a classes .btn-outline-**
to quickly create a bordered buttons.
Button Outline Rounded
Use a classes .btn-outline-**
to quickly create a bordered buttons.
Soft Rounded Buttons
Use a classes .btn-soft-**
.rounded-pill
to quickly create a soft background color buttons with rounded.
Button-Disabled
Add the disabled
attribute to <button>
buttons.
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).