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-soft- class with the below-mentioned variation to create a button with the soft 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 bg-animation class to create an animated button.

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

Example of loading buttons.

Example of simple bottom borderd buttons.

Example of simple darken buttons.

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.

<!-- Toggle Button Status --> <Button variant="primary" data-bs-toggle="button" aria-pressed="false"> Single toggle </Button>

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.