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-primary btn mr-1 mb-1" type="button">Primary
</button>
<button class="btn-secondary btn mr-1 mb-1" type="button">Secondary
</button>
<button class="btn-success btn mr-1 mb-1" type="button">Success
</button>
<button class="btn-info btn mr-1 mb-1" type="button">Info
</button>
<button class="btn-warning btn mr-1 mb-1" type="button">Warning
</button>
<button class="btn-danger btn mr-1 mb-1" type="button">Danger
</button>
<button class="btn-light btn mr-1 mb-1" type="button">Light
</button>
<button class="btn-dark btn mr-1 mb-1" type="button">Dark
</button>

Outline Buttons

<button class="btn-outline-primary btn mr-1 mb-1" type="button">Primary
</button>
<button class="btn-outline-secondary btn mr-1 mb-1" type="button">Secondary
</button>
<button class="btn-outline-success btn mr-1 mb-1" type="button">Success
</button>
<button class="btn-outline-info btn mr-1 mb-1" type="button">Info
</button>
<button class="btn-outline-warning btn mr-1 mb-1" type="button">Warning
</button>
<button class="btn-outline-danger btn mr-1 mb-1" type="button">Danger
</button>
<button class="btn-outline-light btn mr-1 mb-1" type="button">Light
</button>
<button class="btn-outline-dark btn mr-1 mb-1" type="button">Dark
</button>

Hover Effects

<button class="hvr-sweep-left btn btn-outline-primary mr-1 mb-1" type="button">Sweep left
</button>
<button class="hvr-sweep-right btn btn-outline-primary mr-1 mb-1" type="button">Sweep right
</button>
<button class="hvr-sweep-top btn btn-outline-primary mr-1 mb-1" type="button">Sweep top
</button>
<button class="hvr-sweep-bottom btn btn-outline-primary mr-1 mb-1" type="button">Sweep bottom
</button>
<button class="hvr-sweep-collapseX btn btn-outline-primary mr-1 mb-1" type="button">Sweep collapseX
</button>
<button class="hvr-sweep-collapseY btn btn-outline-primary mr-1 mb-1" type="button">Sweep collapseY
</button>
<hr>
<button class="hvr-sweep-left btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep left
</button>
<button class="hvr-sweep-right btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep right
</button>
<button class="hvr-sweep-top btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep top
</button>
<button class="hvr-sweep-bottom btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep bottom
</button>
<button class="hvr-sweep-collapseX btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep collapseX
</button>
<button class="hvr-sweep-collapseY btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Sweep collapseY
</button>
<hr>
<button class="hvr-sweep-left btn btn-primary rounded-capsule mr-1 mb-1" type="button">Sweep left
</button>
<button class="hvr-sweep-right btn btn-primary rounded-capsule mr-1 mb-1" type="button">Sweep right
</button>
<button class="hvr-sweep-top btn btn-primary rounded-capsule mr-1 mb-1" type="button">Sweep top
</button>
<button class="hvr-sweep-bottom btn btn-primary rounded-capsule mr-1 mb-1" type="button">Sweep bottom
</button>
<button class="hvr-sweep-collapseX btn btn-primary rounded-capsule mr-1 mb-1" type="button">Sweep collapseX
</button>
<button class="hvr-sweep-collapseY btn btn-primary rounded-capsule mr-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 mr-1 mb-1" type="button">
  <span class="fas fa-plus mr-1" data-fa-transform="shrink-3"></span>Small
</button>
<button class="btn btn-dark mr-1 mb-1" type="button">
  <span class="fas fa-plus mr-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-dark btn-lg mr-1 mb-1" type="button">
  <span class="fas fa-plus mr-1" data-fa-transform="shrink-3"></span>Large
</button>
<hr>
<button class="btn btn-primary mr-1 mb-1" type="button">
  <span class="fas fa-plus mr-1" data-fa-transform="shrink-3"></span>Regular
</button>
<button class="btn btn-outline-primary mr-1 mb-1" type="button">
  <span class="fas fa-plus mr-1" data-fa-transform="shrink-3"></span>Outline
</button>
<hr>
<button class="btn btn-primary mr-1 mb-1" type="button">
  Delete<span class="fas fa-trash ml-1" data-fa-transform="shrink-3"></span>
</button>

Button Capsule

<button class="btn btn-dark rounded-capsule mr-1 mb-1" type="button">Example</button>
<button class="btn btn-dark rounded-capsule mr-1 mb-1" type="button">
  <span class="fas fa-align-left mr-1" data-fa-transform="shrink-3"></span>Icon Left
</button>
<button class="btn btn-dark rounded-capsule mr-1 mb-1" type="button">
  Icon Right<span class="fas fa-align-right ml-1" data-fa-transform="shrink-3"></span>
</button>
<button class="ml-1 btn btn-outline-primary rounded-capsule mr-1 mb-1" type="button">Outline</button>
<hr>
<button class="btn btn-sm btn-dark rounded-capsule mr-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-dark rounded-capsule mr-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-dark rounded-capsule mr-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 mr-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 mr-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 mr-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

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