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.

Soft Buttons

Use btn-soft- class with the below-mentioned variation to create a button with the soft 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.

Animation Buttons

Use bg-animation class to create an animated button.

Buttons with Label

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

Primary

Load More Buttons

Example of loading buttons.

Border Buttons

Example of simple bottom borderd buttons.

Darken Buttons

Example of simple darken buttons.

Custom Toggle Buttons

Example of toggle buttons.

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)

Link

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.