Button Group

1<div class="container py-4">
2  <!-- Solid variants -->
3  <div class="d-flex flex-wrap gap-2 mb-3">
4    <button class="btn btn-primary">Primary</button>
5    <button class="btn btn-secondary">Secondary</button>
6    <button class="btn btn-success">Success</button>
7    <button class="btn btn-danger">Danger</button>
8    <button class="btn btn-warning">Warning</button>
9    <button class="btn btn-info text-white">Info</button>
10  </div>
11  <!-- Outline variants -->
12  <div class="d-flex flex-wrap gap-2 mb-3">
13    <button class="btn btn-outline-primary">Outline Primary</button>
14    <button class="btn btn-outline-secondary">Outline Secondary</button>
15    <button class="btn btn-outline-success">Outline Success</button>
16    <button class="btn btn-outline-danger">Outline Danger</button>
17  </div>
18  <!-- Pill + sizes -->
19  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
20    <button class="btn btn-primary rounded-pill btn-sm">Small Pill</button>
21    <button class="btn btn-primary rounded-pill">Medium Pill</button>
22    <button class="btn btn-primary rounded-pill btn-lg">Large Pill</button>
23  </div>
24  <!-- Loading state -->
25  <div class="d-flex gap-2">
26    <button class="btn btn-primary" type="button" disabled>
27      <span class="spinner-border spinner-border-sm me-2" role="status"></span>
28      Loading...
29    </button>
30    <button class="btn btn-outline-secondary" disabled>Disabled</button>
31  </div>
32</div>