Buttons page header description goes here...

Classes

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Please read the official Bootstrap documentation for the full list of options. 


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-black">Black</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-purple">Purple</button>
<button type="button" class="btn btn-indigo">Indigo</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-pink">Pink</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-yellow">Yellow</button>
<button type="button" class="btn btn-teal">Teal</button>
<button type="button" class="btn btn-success">Success</button>

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button. 


<button type="button" class="btn btn-outline-default">Default</button>
<button type="button" class="btn btn-outline-silver">Silver</button>
<button type="button" class="btn btn-outline-black">Black</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-purple">Purple</button>
<button type="button" class="btn btn-outline-indigo">Indigo</button>
<button type="button" class="btn btn-outline-link">Link</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-pink">Pink</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-yellow">Yellow</button>
<button type="button" class="btn btn-outline-teal">Teal</button>
<button type="button" class="btn btn-outline-success">Success</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

LARGE BUTTON
SMALL BUTTON 
<!-- large button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<!-- small button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

States

Buttons will appear pressed when active or you can still force the same active appearance by adding .active class. Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

ACTIVE STATE
Primary link Link
DISABLED STATE 
<!-- active state -->
<a href="#" class="btn btn-primary btn-lg active">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active">Link</a>

<!-- disabled state -->
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Button group

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

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

Group size

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

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>

Vertical Group

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

<div class="btn-group-vertical">...</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">
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>