Buttons

Examples

button.btn.btn-(primary|secondary|success|danger|warning|info|light|dark|link)

Primary Secondary Success Danger Warning Info Light Dark Link

Various elements and attributes

Outline buttons

button.btn.btn-outline-(primary|secondary|success|danger|warning|info|light|dark)

Primary Secondary Success Danger Warning Info Light Dark

Sizes

(button|...).btn.btn-(lg|sm)

Large .btn-lg

Large button Large button

Medium (default)

Medium button Medium button

Small .btn-sm

Small button Small button

Block level buttons

Add .btn-block

Block level button Block level button

Active state

Setting .active displays buttons with always active (pressed) state.

Primary link Secondary link 

Disabled state

• With button
  • Attibute disabled (acts on both display and action)
  • Or class .disabled (grayed display only)
• With a
  • Class .disabled (acts on both display and action)
  • Accessibility attribute (recommended) aria-disabled="true"

Example 1: Attribute disabled to button (disables both display and action)

Example 2: Class .disabled to button (can be still pressed)

Example 3: Class .disabled to a (disables both display and action)

Button group

Basic example

• Button group div.btn-group Attributes
  • Accessibility attribute role="group"
  • Accessibility attribute (e.g.) aria-label="Basic example"
  • Button item(s) button.btn.btn-(primary|secondary|...) Attribute
    • Attribute type="button"
    • Text (e.g.) Left

Button toolbar

A button toolbar is used to gather button groups, input groups, form controls, etc.

• Button toolbar div.btn-toolbar Attributes
  • Accessibility attribute role="toolbar"
  • Accessibility attribute (e.g.) aria-label="Toolbar with button groups"
  • Button group(s) div.btn-group
    • See Basic example
  • Or also: Input group (⇒ Input group ), etc.

Basic example of a button toolbar

Examples using input groups with alignment options

div.btn-toolbar

div.btn-toolbar.justify-content-between (⇒ Flex utilities )

Example using radios: (see Chexboxes and radios - Inline )

Radios are wrapped by div.form.form-inline and justified with .mx-auto

Sizing

Set .btn-group-(lg|sm)

div.btn-group.btn-group-lg

div.btn-group

div.btn-group.btn-group-sm

Using dropdowns (nesting)

Dropdowns can be used with nesting button groups.

• div.btn-group
  • Normal buttons button.btn.btn-secondary
  • Nested div.btn-group
    • Dropdown button.btn.btn-secondary.dropdown-toggle
    • Item list div.dropdown-menu
      • Items a.dropdown-item

Vertical variation

div.btn-group-vertical

Vertival example with dropdowns (see source for detail)