Buttons

These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View Buttons on Bootstrap

Buttons Colors

Use default Bootstrap markup to display Buttons elements. See the Bootstrap documentation for a full list of options and modifiers.

<button class="btn btn-primary me-1 mb-1" type="button">primary</button>
<button class="btn btn-secondary me-1 mb-1" type="button">secondary</button>
<button class="btn btn-success me-1 mb-1" type="button">success</button>
<button class="btn btn-info me-1 mb-1" type="button">info</button>
<button class="btn btn-warning me-1 mb-1" type="button">warning</button>
<button class="btn btn-danger me-1 mb-1" type="button">danger</button>
<button class="btn btn-light me-1 mb-1" type="button">light</button>
<button class="btn btn-dark me-1 mb-1" type="button">dark</button>
Outline Buttons
<button class="btn-outline-primary btn me-1 mb-1" type="button">primary</button>
<button class="btn-outline-secondary btn me-1 mb-1" type="button">secondary</button>
<button class="btn-outline-success btn me-1 mb-1" type="button">success</button>
<button class="btn-outline-info btn me-1 mb-1" type="button">info</button>
<button class="btn-outline-warning btn me-1 mb-1" type="button">warning</button>
<button class="btn-outline-danger btn me-1 mb-1" type="button">danger</button>
<button class="btn-outline-light btn me-1 mb-1" type="button">light</button>
<button class="btn-outline-dark btn me-1 mb-1" type="button">dark</button>
Hover Effects 
<button class="hvr-sweep-left btn btn-outline-primary me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-right btn btn-outline-primary me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-top btn btn-outline-primary me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn btn-outline-primary me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn btn-outline-primary me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn btn-outline-primary me-1 mb-1" type="button">Sweep collapseY</button>
<hr />
<button class="hvr-sweep-left btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-right btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-top btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Sweep collapseY</button>
<hr />
<button class="hvr-sweep-left btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep left</button>
<button class="hvr-sweep-right btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep right</button>
<button class="hvr-sweep-top btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep top</button>
<button class="hvr-sweep-bottom btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep bottom</button>
<button class="hvr-sweep-collapseX btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep collapseX</button>
<button class="hvr-sweep-collapseY btn btn-primary rounded-pill me-1 mb-1" type="button">Sweep collapseY</button>
Button sizes
Small
Regular
Large
<div class="btn btn-dark btn-sm">Small</div>
<div class="btn btn-dark">Regular</div>
<div class="btn btn-dark btn-lg">Large</div>
Icon Buttons
<button class="btn btn-dark btn-sm me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Small
</button>
<button class="btn btn-dark me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-dark btn-lg me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Large
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-outline-primary me-1 mb-1" type="button">
  <span class="fas fa-plus me-1" data-fa-transform="shrink-3"></span>Outline
</button>
<hr />
<button class="btn btn-primary me-1 mb-1" type="button">
  Delete<span class="fas fa-trash ms-1" data-fa-transform="shrink-3"></span>
</button>
Button Capsule
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">Example</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">
  <span class="fas fa-align-left me-1" data-fa-transform="shrink-3"></span>Icon Left
</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">
  Icon Right<span class="fas fa-align-right ms-1" data-fa-transform="shrink-3"></span>
</button>
<button class="ms-1 btn btn-outline-primary rounded-pill me-1 mb-1" type="button">Outline</button>
<hr />
<button class="btn btn-sm btn-dark rounded-pill me-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-dark rounded-pill me-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-dark rounded-pill me-1 mb-1" type="button">Capsule Large </button>

Button Group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.

Basic Example

Wrap a series of buttons with.btn in.btn-group. Add on optional JavaScript radio and checkbox style behaviour with

<div class="btn-group" role="group" aria-label="Basic example">
  <button class="btn btn-dark" type="button">Left</button>
  <button class="btn btn-dark" type="button">Middle</button>
  <button class="btn btn-dark" type="button">Right</button>
</div>
Button Toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2 mb-1" role="group" aria-label="First group">
    <button class="btn btn-dark" type="button">1</button>
    <button class="btn btn-dark" type="button">2</button>
    <button class="btn btn-dark" type="button">3</button>
    <button class="btn btn-dark" type="button">4</button>
  </div>
  <div class="btn-group me-2 mb-1" role="group" aria-label="Second group">
    <button class="btn btn-dark" type="button">5</button>
    <button class="btn btn-dark" type="button">6</button>
    <button class="btn btn-dark" type="button">7</button>
  </div>
  <div class="btn-group mb-1" role="group" aria-label="Third group">
    <button class="btn btn-dark" type="button">8</button>
  </div>
</div>
Button toolbar with input group

Feel free to mix input groups with button groups in your toolbars. Similar to the example above, you'll likely need some utilities though to space things properly.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2 mb-3" role="group" aria-label="First group">
    <button class="btn btn-dark" type="button">1</button>
    <button class="btn btn-dark" type="button">2</button>
    <button class="btn btn-dark" type="button">3</button>
    <button class="btn btn-dark" type="button">4</button>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon" />
  </div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mb-3" role="group" aria-label="First group">
    <button class="btn btn-dark" type="button">1</button>
    <button class="btn btn-dark" type="button">2</button>
    <button class="btn btn-dark" type="button">3</button>
    <button class="btn btn-dark" type="button">4</button>
  </div>
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input class="form-control" type="text" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2" />
  </div>
</div>
Sizing

Insteam of aplying button sizing classes to every button in a group, just add.btn-gorup-*to each.btn-group, including each one when nesting multiple groups.

<div class="btn-group btn-group-lg" role="group" aria-label="...">
  <button class="btn btn-dark" type="button">Left</button>
  <button class="btn btn-dark" type="button">Middle</button>
  <button class="btn btn-dark d-none d-md-inline-block" type="button">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="...">
  <button class="btn btn-dark" type="button">Left</button>
  <button class="btn btn-dark" type="button">Middle</button>
  <button class="btn btn-dark" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group" aria-label="...">
  <button class="btn btn-dark" type="button">Left</button>
  <button class="btn btn-dark" type="button">Middle</button>
  <button class="btn btn-dark" type="button">Right</button>
</div>
Vertical variation

Make a set of buttons appear vertically tacked rather than horizontally. Split button dropdowns ae not supported here.

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button class="btn btn-dark" type="button">Button</button>
  <button class="btn btn-dark" type="button">Button</button>
  <button class="btn btn-dark" type="button">Button</button>
  <button class="btn btn-dark" type="button">Button</button>
  <button class="btn btn-dark" type="button">Button</button>
  <button class="btn btn-dark" type="button">Button</button>
</div>
Vertical variation with dropdown
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2"><a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop3" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-secondary dropdown-toggle" id="btnGroupVerticalDrop4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>