SyntaxStudy
Sign Up
Bootstrap Beginner 7 min read

Buttons and Badges

Buttons and Badges

Buttons

<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-outline-primary">Outline</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-primary" disabled>Disabled</button>

Button Groups

<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

Badges

<span class="badge bg-primary">New</span>
<span class="badge bg-danger rounded-pill">99+</span>
<button class="btn btn-primary">
  Messages <span class="badge bg-light text-dark">4</span>
</button>
Pro Tip

Add role="button" and tabindex="0" to non-button elements styled as buttons for accessibility.