Buttons
Default Buttons
Use the btn class to show the default button style.
Outline Buttons
Use 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.
Subtle Buttons
Use btn-subtle- class with the below-mentioned variation to create a button with the subtle background.
Ghost Buttons
Use btn-ghost- class with the below-mentioned variation to create a button with the transparent background.
Gradient Buttons
Use bg-gradient class to create a gradient button.
Buttons with Label
Use btn-label class to create a button with the label.
Load More Buttons
Example of loading buttons.
Custom Toggle Buttons
Base class
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.
Custom sizing with CSS variables
You can even roll your own custom sizing with CSS variables:
Buttons Sizes
Use btn-lg class to create a large size button and btn-sm class to create a small size button.
Buttons Width
Use w-xs,w-sm,w-md,w-lg class to make different sized buttons respectively.
Buttons Tag
Use btn class with different HTML elements. (though some browsers may apply a slightly different rendering)
Buttons Toggle Status
Use data-bs-toggle="button" to toggle a button's active state.
Buttons Grid
Use d-grid class to create a full-width block button.
Checkbox & Radio Buttons
Combine button-like checkbox and radio toggle buttons into a seamless looking button group.
Buttons Group
Use the btn-group class in the parent class to wrap a series of buttons.
Icon Buttons
Use btn-icon class to wrap icon in button
Buttons Toolbar
Use btn-toolbar class to combine sets of button groups into more complex components.
Button Group Sizing
Use btn-group- class with the below-mentioned variation to set the different sizes of button groups.
Vertical Variation
Make a set of buttons appear vertically stacked .Split button dropdowns are not supported here.
Focus Ring
Click directly on the link below to see the focus ring in action, or into the example below and then press Tab.
Focus Ring Utilities
In addition to .focus-ring, we have several .focus-ring-* utilities to modify the helper class defaults. Modify the color with any of our theme colors. Note that the light and dark variants may not be visible on all background colors given current color mode support.