Use the btn class to show the default button style.

Use btn-outline- class with the below-mentioned variation to create a button with the outline.

Use the rounded-pill class to make a rounded button.

Use btn-subtle- class with the below-mentioned variation to create a button with the subtle background.

Use btn-ghost- class with the below-mentioned variation to create a button with the transparent background.

Use bg-gradient class to create a gradient button.

Use btn-label class to create a button with the label.

Example of loading buttons.

Example of toggle buttons.

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.

<button type="button" class="btn">Base class</button>

You can even roll your own custom sizing with CSS variables:

Use btn-lg class to create a large size button and btn-sm class to create a small size button.

Use w-xs,w-sm,w-md,w-lg class to make different sized buttons respectively.

Use btn class with different HTML elements. (though some browsers may apply a slightly different rendering)

Use data-bs-toggle="button" to toggle a button’s active state.

Use d-grid class to create a full-width block button.

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

Use the btn-group class in the parent class to wrap a series of buttons.

Use btn-icon class to wrap icon in button

Use btn-toolbar class to combine sets of button groups into more complex components.

Use btn-group- class with the below-mentioned variation to set the different sizes of button groups.

Make a set of buttons appear vertically stacked .Split button dropdowns are not supported here.