Explain Bootstrap button classes and their variations

Beginner

Answer

Bootstrap provides various button styles and states:

Basic button types:

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

Button variants:

  • Outline buttons: btn-outline-primary
  • Sizes: btn-sm, btn-lg
  • Block buttons: d-grid wrapper or w-100 class
  • States: active, disabled