Buttons, Button Groups & Badges

Bootstrap buttons use .btn plus .btn-primary, .btn-secondary, .btn-success, etc. Sizes: .btn-lg and .btn-sm. .btn-outline-* gives bordered buttons.

Buttons

Bootstrap buttons use .btn plus .btn-primary, .btn-secondary, .btn-success, etc. Sizes: .btn-lg and .btn-sm. .btn-outline-* gives bordered buttons.

Disable with the disabled attribute or .disabled class. Link buttons use <a class="btn btn-primary">.

Real-life example: Buttons are doorbells — primary is the main entrance, outline is the side door, disabled means out of order.

Button styles and sizes

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-danger">Outline</button>
<button type="button" class="btn btn-success btn-lg">Large</button>
<button type="button" class="btn btn-secondary btn-sm">Small</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>

Button Groups

Wrap related buttons in .btn-group so they sit together. Use .btn-group-vertical for stacked groups. .btn-toolbar groups multiple button groups.

Real-life example: A button group is like linked train compartments — they move as one unit instead of separate carriages with gaps.

Horizontal and vertical button groups

<div class="btn-group mb-3" role="group">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

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

Badges

Badges are small labels for counts or status. Use .badge with .text-bg-primary, .text-bg-danger, etc. .rounded-pill makes capsule badges.

Real-life example: Badges are like sticky number tags on shop items — "New", "3 unread", "Sale".

Badges on buttons and headings

<h2>Messages <span class="badge text-bg-danger">4</span></h2>

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    99+
  </span>
</button>