Button Styles and States in Bootstrap

Bootstrap provides a range of button styles and states to enhance the functionality and visual appeal of buttons. These styles and states help ensure that buttons are accessible, consistent, and appropriately styled for various interactions.

Button Styles (Variants)

Bootstrap offers several button styles (variants) that use contextual classes to apply different colors and effects. These styles are intended to convey different meanings or priorities for actions.

1. Primary Button

• Class: .btn-primary
• Usage: Represents the main action on the page.

<button type="button" class="btn btn-primary">Primary Button</button>

2. Secondary Button

• Class: .btn-secondary
• Usage: Represents a secondary action or less important button.

<button type="button" class="btn btn-secondary">Secondary Button</button>

3. Success Button

• Class: .btn-success
• Usage: Indicates a successful or positive action.

<button type="button" class="btn btn-success">Success Button</button>

4. Danger Button

• Class: .btn-danger
• Usage: Indicates a dangerous or potentially destructive action.

<button type="button" class="btn btn-danger">Danger Button</button>

5. Warning Button

• Class: .btn-warning
• Usage: Indicates a warning or cautionary action.

<button type="button" class="btn btn-warning">Warning Button</button>

6. Info Button

• Class: .btn-info
• Usage: Indicates informational or neutral actions.

<button type="button" class="btn btn-info">Info Button</button>

7. Light Button

• Class: .btn-light
• Usage: Used on dark backgrounds or for a minimalistic look.

<button type="button" class="btn btn-light">Light Button</button>

8. Dark Button

• Class: .btn-dark
• Usage: Used on light backgrounds for contrast.

<button type="button" class="btn btn-dark">Dark Button</button>

9. Link Button

• Class: .btn-link
• Usage: Looks like a hyperlink but functions as a button.

<button type="button" class="btn btn-link">Link Button</button>

Button Outline Styles

Bootstrap also offers outline button variants, which have transparent backgrounds with colored borders. They are useful for a less bold appearance.

Outline Button Examples:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Button Sizes

Buttons can be resized to fit different design needs using size-specific classes.

1. Large Buttons

• Class: .btn-lg
• Usage: Creates a larger button.

<button type="button" class="btn btn-primary btn-lg">Large Button</button>

2. Small Buttons

• Class: .btn-sm
• Usage: Creates a smaller button.

<button type="button" class="btn btn-secondary btn-sm">Small Button</button>

3. Default Size

• Usage: If no size class is used, the button will be of the default size.

<button type="button" class="btn btn-success">Default Button</button>

Button States

Buttons have several states that visually represent different interactions and statuses. Bootstrap provides built-in classes for these states.

1. Active State

• Class: .active
• Usage: Indicates that the button is currently pressed or toggled.

<button type="button" class="btn btn-primary active">Active Button</button>

2. Disabled State

• Attribute: disabled
• Class: .disabled
• Usage: Disables the button so it cannot be interacted with.

<button type="button" class="btn btn-secondary" disabled>Disabled Button</button>

• Disabling: You can also use the disabled attribute to make a button non-clickable. The .disabled class visually indicates the button is disabled but does not prevent interaction.

3. Focus State

• Usage: Indicated by default browser styles when a button receives focus, typically with a border or shadow.

<button type="button" class="btn btn-success">Focus State Button</button>

• Focus: The button will have a visible focus state when clicked or navigated to using the keyboard.

Button Group Variations

In addition to basic styles, Bootstrap supports variations for grouping buttons.

1. Button Toolbar

• Class: .btn-toolbar
• Usage: Groups multiple button groups together in a toolbar layout.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2" role="group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
</div>

• .btn-toolbar: Allows for complex button layouts with spacing and alignment.

2. Split Button Dropdown

• Class: .dropdown-toggle-split
• Usage: Separates the main action button from the dropdown toggle.

<div class="btn-group">
  <button type="button" class="btn btn-info">Action</button>
  <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action 1</a></li>
    <li><a class="dropdown-item" href="#">Action 2</a></li>
  </ul>
</div>

• .dropdown-toggle-split: Creates a split button with a separate dropdown toggle.

Summary of Button Styles and States

• Button Styles (Variants): Includes primary, secondary, success, danger, warning, info, light, dark, and link buttons.
• Outline Buttons: Use .btn-outline-* for buttons with transparent backgrounds and colored borders.
• Button Sizes: Use .btn-lg for large buttons, .btn-sm for small buttons, or omit size classes for default-sized buttons.
• Button States:
  • Active: .active to indicate the button is pressed.
  • Disabled: disabled attribute or .disabled class to disable the button.
  • Focus: Default browser focus styles.
• Button Group Variations: Includes .btn-toolbar for grouping button groups and .dropdown-toggle-split for split button dropdowns.