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.
Soft Buttons
Use a classes .btn-soft-** to quickly create a soft
background color buttons.
Soft Rounded Buttons
Use a classes .btn-soft-** .rounded-pill
to quickly create a soft background color buttons with rounded.
Gradient Buttons
Use the button classes on an <a>,
<button>, or <input> element.
Gradient Rounded Buttons
Use a classes .btn-outline-** to quickly create a
bordered buttons.
Ghost Buttons
Use a classes .btn-ghost-** to quickly create a ghost
background color buttons.
Ghost Rounded Buttons
Use a classes .btn-ghost-**
.rounded-pill to quickly create a ghost background color buttons with
rounded.
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).
Basic Button
Bootstrap has a base .btn class that sets up basic
styles such as padding and content alignment. By default, .btn controls
have a transparent border and background color, and lack any explicit focus and
hover styles.