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

<button type="button" class="btn btn-primary btn-square">Primary</button>

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-primary btn-rounded">Primary</button>

<button type="button" class="btn btn-primary btn-uppercase">Primary</button>

<button type="button" class="btn btn-primary disabled">Primary</button><!-- or --><button type="button" class="btn btn-primary" disabled>Primary</button>

<button type="button" class="btn btn-outline-secondary btn-uppercase">  <i class="ti-plus mr-2"></i> Create User</button><button type="button" class="btn btn-success btn-uppercase">  <i class="ti-check-box mr-2"></i> Save</button><button type="button" class="btn btn-outline-warning btn-rounded btn-uppercase">  <i class="ti-settings mr-2"></i> Settings</button><button type="button" class="btn btn-danger btn-square btn-uppercase">  <i class="ti-trash mr-2"></i> Delete</button>

<button type="button" class="btn btn-outline-secondary">  <i class="ti-plus"></i></button><button type="button" class="btn btn-success">  <i class="ti-check-box"></i></button><button type="button" class="btn btn-warning btn-rounded">  <i class="ti-settings"></i></button><button type="button" class="btn btn-danger btn-square">  <i class="ti-trash"></i></button>

<button type="button" class="btn btn-secondary btn-floating">  <i class="ti-plus"></i></button>

<button type="button" class="btn btn-primary" disabled>  <span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>  Loading...</button>

<button type="button" class="btn btn-primary btn-pulse">  <i class="ti-user mr-2"></i> Profile</button>

<a href="#" class="btn btn-apple">  <i class="fa fa-apple"></i>  <span>    <span>Download on the</span>    <span>App Store</span>  </span></a><a href="#" class="btn btn-google-play">  <img src="google_play_button.png" alt="image">  <span>     <span>Get in on</span>     <span>Google Play</span>   </span></a>

<button type="button" class="btn btn-facebook">  <i class="fa fa-facebook-square mr-2"></i> Facebook</button><button type="button" class="btn btn-google">  <i class="fa fa-google mr-2"></i> Google</button><button type="button" class="btn btn-twitter">  <i class="fa fa-twitter mr-2"></i> Twitter</button><button type="button" class="btn btn-linkedin">  <i class="fa fa-linkedin mr-2"></i> Linkedin</button>...

<button type="button" class="btn btn-secondary btn-sm">Button</button><button type="button" class="btn btn-secondary">Button</button><button type="button" class="btn btn-secondary btn-lg">Button</button>

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

<div class="btn-group" role="group" aria-label="Basic example">  <button type="button" class="btn btn-primary">    <i class="ti-control-pause"></i>  </button>  <button type="button" class="btn btn-success">    <i class="ti-control-play"></i>  </button>  <button type="button" class="btn btn-warning">    <i class="ti-control-forward"></i>  </button></div>

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

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">  <button type="button" class="btn btn-dark">Left</button>  <button type="button" class="btn btn-dark">Middle</button>  <button type="button" class="btn btn-dark">Right</button></div><div class="btn-group" role="group" aria-label="Default button group">  <button type="button" class="btn btn-dark">Left</button>  <button type="button" class="btn btn-dark">Middle</button>  <button type="button" class="btn btn-dark">Right</button></div><div class="btn-group btn-group-sm" role="group" aria-label="Small button group">  <button type="button" class="btn btn-dark">Left</button>  <button type="button" class="btn btn-dark">Middle</button>  <button type="button" class="btn btn-dark">Right</button></div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">  <button type="button" class="btn btn-dark">1</button>  <button type="button" class="btn btn-dark">2</button>  <div class="btn-group" role="group">    <button id="btnGroupDrop1" type="button" class="btn btn-dark dropdown-toggle"            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">      Dropdown    </button>    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">      <a class="dropdown-item" href="#">Dropdown link</a>      <a class="dropdown-item" href="#">Dropdown link</a>    </div>  </div></div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">  <button type="button" class="btn btn-primary">    <i class="fa fa-cloud-upload"></i>  </button>  <button type="button" class="btn btn-primary">    <i class="fa fa-calendar"></i>  </button>  <button type="button" class="btn btn-primary">    <i class="fa fa-database"></i>  </button>  <button type="button" class="btn btn-primary">    <i class="fa fa-cog"></i>  </button>  <button type="button" class="btn btn-primary">    <i class="fa fa-heart-o"></i>  </button>  <button type="button" class="btn btn-primary">    <i class="fa fa-share"></i>  </button></div>