Buttons

Standard Buttons

Normal

Primary

Active state

Disabled

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

Outline Buttons

Use .btn-outline-* class for outline buttons.

Normal

Active state

Disabled

<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-primary active">Active</button>

Light Buttons

Use .btn-light-* class for light buttons.

Normal

Active state

Disabled

<button class="btn btn-light-primary">Light Soft</button>

Square Buttons

Use .rounded-0 class for square buttons.

Normal

<button class="btn btn-primary rounded-0">Square</button>

Pill Buttons

Use .rounded-pill class for pill buttons.

Normal

<button class="btn btn-primary rounded-pill">Pill</button>

Socials Buttons

<button class="btn btn-facebook"><i class="fab fa-facebook"></i> Facebook</button>
<button class="btn btn-github"><i class="fab fa-github"></i> GitHub</button>

<button class="btn btn-primary">
  <i class="fa fa-smile me-1"></i> Primary
</button>

Button Sizes

Fancy larger or smaller buttons.

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

Button Dropdown

Dropdowns styles with buttons.

<div class="btn-group">
  <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Primary</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
  </div>
</div>

Button Group

Button group components.

Horizontal button group

Button toolbar

Vertical button group

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