Buttons
Default Buttons
Use the btn class to show the default button style.
Outline Buttons
Use the btn-outline- class with the below-mentioned variation to create a button with the outline.
Rounded Buttons
Use the rounded-pill class to make a rounded button.
Soft Buttons
Use the btn-soft- class with the below-mentioned variation to create a button with the soft background.
Gradient Buttons
Use the button classes on an <a>
, <button>
, or <input>
element.
Gradient Buttons 2
Use the bg-*-gradient class to create a gradient button.
Animation Button
Use the btn-animation class to create a animation effect.
Buttons with Label
Use the btn-label class to create a button with the label.
Buttons Sizes
Use btn-lg class to create a large size button and btn-sm class to create a small size button.
Buttons Toggle States
Use the data-bs-toggle="button" to toggle a button’s active state.
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).
Icon Buttons
Use btn-icon class to wrap icon in button
Block Buttons
Use the d-grid class to create a full-width block button.