@@include("partials/main.html") @@include("partials/title-meta.html", {"title": "Buttons"}) @@include("partials/head-css.html") @@include("partials/body.html")
@@include("partials/menu.html", {"title": "Buttons"})

#### Default Buttons

Bootstrap includes six predefined button styles, each serving its own semantic purpose.

#### Outline Buttons

Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.

#### Rounded Buttons

Use class `.btn-rounded` for button round border.

#### Buttons With Icon

Add icon in button.

#### Soft Buttons

Soft buttons

#### Soft Icon Buttons

Use class `btn-soft-*` for button round border.

#### Disable Buttons

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.

#### Link Functionality Caveat Disable Buttons

`<a>`s don’t support the `disabled` attribute, so you must add the `.disabled` class and `aria-disabled="true"` to make it visually appear disabled. also include a `tabindex="-1"` attribute.

Primary link Link

#### Snip Buttons

Example of Snip Buttons

##### Example 1

##### Example 2

##### Example 3

#### Buttons Sizes

Add `.btn-lg` or `.btn-sm` for additional sizes.

#### Buttons Width

Add `.w-xs`, `.w-sm`, `.w-md` and `.w-lg` class for additional buttons width.

#### Button Tags

The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).

Link

#### Toggle States

Add `data-bs-toggle="button"` to toggle a button’s `active` state. If you’re pre-toggling a button, you must manually add the `.active` class and `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.

Toggle link Active toggle link Disabled toggle link

#### Block Buttons

Add `.d-grid`. class in parent div for block buttons

#### Checkbox & Radio Buttons

Create button-like checkboxes and radio buttons by using `.btn` styles rather than `.form-check-label` on the `<label>` elements.

Checkbox 1 Checkbox 2 Checkbox 3
Checkbox 4 Checkbox 5 Checkbox 6
Radio 1 Radio 2 Radio 3
Radio 4 Radio 5 Radio 6

#### Button Group

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

#### Button Toolbar

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

#### Sizing

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.

#### Vertical Variation

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

Radio 1 Radio 2 Radio 3
@@include("partials/footer.html")
@@include("partials/right-sidebar.html") @@include("partials/vendor-scripts.html")