Shape

Examples

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

Outline buttons

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

Button sizes

Small

Regular

Large

<div class="btn btn-secondary btn-sm">Small</div>
<div class="btn btn-secondary">Regular</div>
<div class="btn btn-secondary btn-lg">Large</div>

Icon Buttons

<button class="btn btn-primary 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-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-primary 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-primary rounded-capsule mr-1 mb-1" type="button">Example
</button><button class="btn btn-primary 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-primary 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-primary rounded-capsule mr-1 mb-1" type="button">Capsule Small</button>
<button class="btn btn-primary rounded-capsule mr-1 mb-1" type="button">Capsule Regular</button>
<button class="btn btn-lg btn-primary 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.

Button-Group on Bootstrap

Basic Example

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

<div class="btn-group" role="group" aria-label="Basic example">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" 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-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="btn-group mb-2 mr-2" role="group" aria-label="Second group">
    <button class="btn btn-secondary" type="button">5</button>
    <button class="btn btn-secondary" type="button">6</button>
    <button class="btn btn-secondary" type="button">7</button>
  </div>
  <div class="btn-group mb-2" role="group" aria-label="Third group">
    <button class="btn btn-secondary" 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 mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mb-2 mr-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button>
  </div>
  <div class="input-group mb-2">
    <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-2" role="group" aria-label="First group">
    <button class="btn btn-secondary" type="button">1</button>
    <button class="btn btn-secondary" type="button">2</button>
    <button class="btn btn-secondary" type="button">3</button>
    <button class="btn btn-secondary" type="button">4</button></div>
  <div class="input-group mb-2">
    <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-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="...">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" type="button">Right</button>
</div>
<div class="btn-group btn-group-sm mt-2" role="group" aria-label="...">
  <button class="btn btn-secondary" type="button">Left</button>
  <button class="btn btn-secondary" type="button">Middle</button>
  <button class="btn btn-secondary" 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-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" type="button">Button</button>
  <button class="btn btn-secondary" 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</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>

Buttons