Button

#### Basic Buttons

Use the button classes `.btn-*` on an `a`, `button`, or `input` element.

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

Block button

#### Outline Buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

Block button

#### Icon Buttons

You can easily create a button with icon on the left `.icon-left` or right `.icon-right` side

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

Icon only

#### Square Buttons

Do you like the square buttons? Add `.rounded-0` to change its shape.

Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

#### Button Group

Wrap a series of buttons with `.btn` in `.btn-group`.

Default style

Mixed style

Outline style

Using with checkbox

Checkbox 1 Checkbox 2 Checkbox 3

Using with radio

Radio 1 Radio 2 Radio 3

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.

Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.

Vertical variation

- Fixed Header
- Fixed Footer
- Theme Color
  Light
  Dark
- Collapse Sidebar