Skip to content
Bootstrap

Buttons

Use button variants, sizes, states, and groups.

#buttons#components

Code

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