1. Button Basics

Bootstrap 5 comes with pre-styled buttons. Use the btn class along with a variant class to style them.

Syntax:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

• All buttons have rounded corners by default.

• btn-outline-* variants give an outlined style.

<button class="btn btn-outline-primary">Outlined Primary</button>

2. Button Sizes

• .btn-lg → Large button

• .btn-sm → Small button

• Default size if no modifier is used.

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-secondary btn-sm">Small</button>

3. Button States

• Active state: .active

• Disabled state: .disabled for <a> or disabled attribute for <button>

<button class="btn btn-primary active" type="button">Active</button>
<button class="btn btn-secondary" type="button" disabled>Disabled</button>

4. Button Types

• <button> → standard clickable button

• <a> → link styled as button

• <input type="submit"> → form submission

<a href="#" class="btn btn-success">Link Button</a>
<input type="submit" class="btn btn-danger" value="Submit">

5. Button Groups

Button groups let you group multiple buttons together horizontally or vertically.

Horizontal Button Group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Vertical Button Group

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-secondary">Top</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Bottom</button>
</div>

6. Toggle Buttons

Bootstrap 5 supports button toggles for checkboxes/radios:

<div class="btn-group" role="group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="option1">Option 1</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
  <label class="btn btn-outline-primary" for="option2">Option 2</label>
</div>

• btn-check hides the input, label.btn acts as the visible button.

• Works for radio (single selection) and checkbox (multiple selections).

7. Button Toolbars

Combine multiple button groups in a toolbar:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <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>

• me-2 adds spacing between groups.

• You can mix different button sizes and variants.

Summary

1. Buttons: btn + variant (primary, secondary, success, etc.)

2. Sizes: btn-sm, btn-lg

3. States: active, disabled

4. Groups: btn-group (horizontal), btn-group-vertical

5. Toggles: btn-check + label.btn

6. Toolbars: group multiple button groups with spacing utilities