Buttons

Code

<!-- Variants -->
<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>

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

<!-- States -->
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary active">Active</button>

<!-- Toggle button and button group -->
<div class="btn-group" role="group">
  <button class="btn btn-outline-dark">Left</button>
  <button class="btn btn-outline-dark">Middle</button>
  <button class="btn btn-outline-dark">Right</button>
</div>

<a href="#" class="btn btn-link">Link button</a>

Explanation

Button variants (btn-primary, btn-success) control color, while outline-* versions show colored borders only. Size classes btn-sm and btn-lg scale padding, and the disabled attribute disables interaction. btn-group arranges buttons into a connected toolbar.

More Bootstrap Snippets