Buttons

Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

How to use

Bootstrap includes predefined button styles, each serving its own semantic purpose.

<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-secondary">Secondary</button> 
<button type="button" class="btn btn-accent">Accent</button> 
<button type="button" class="btn btn-success">Success</button> 
<button type="button" class="btn btn-warning">Warning</button> 
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize: Look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Outline buttons

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-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-accent">Accent</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Sizes

Add .btn-xl, .btn-lg, .btn-sm or .btn-xs for additional sizes.

<button type="button" class="btn btn-primary btn-xl">xlarge button</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

Umbler deploy button

The Deploy to Umbler button help you to deploy new sites from templates with one click.

<a href="https://app.umbler.com/deploy?template=https://github.com/umbler/wordpress">
  <img src="//design.umbler.com//assets/svg/umbler-deploy-button.svg" alt="Deploy to Umbler" />
</a>

Button group

Wrap a series of buttons with .btn in .btn-group.

<!-- basic -->
<div class="btn-group" role="group" aria-label="Basic example">
  <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>

<!-- icons -->
<div class="btn-group" role="group" aria-label="First group">
  <button type="button" class="btn btn-secondary"><span class="icon icon-paperclip"></span></button>
  <button type="button" class="btn btn-secondary"><span class="icon icon-pencil"></span></button>
  <button type="button" class="btn btn-secondary"><span class="icon icon-brand-github"></span></button> 
</div>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group.

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

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle dropdown-unstyled" 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>

Your favorite social network on the box!

<button class="btn btn-whatsapp">
  <span class="icon icon-brand-whatsapp mr-1"></span> WhatsApp
</button> 
<button class="btn btn-messenger">
  <span class="icon icon-brand-messenger mr-1"></span> Messenger
</button> 
<button class="btn btn-facebook">
  <span class="icon icon-brand-facebook mr-1"></span> Facebook
</button> 
<button class="btn btn-github">
  <span class="icon icon-brand-github mr-1"></span> GitHub
</button> 
<button class="btn btn-twitter">
  <span class="icon icon-brand-twitter mr-1"></span> Twitter
</button> 
<button class="btn btn-google">
  <span class="icon icon-brand-google mr-1"></span> Google
</button> 
<button class="btn btn-linkedin">
  <span class="icon icon-brand-linkedin mr-1"></span> Linkedin
</button>

State

Buttons will appear pressed. You can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Primary link

<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<button type="button" class="btn btn-primary" disabled>Primary button</button>

Disabled buttons using the <a> element behave a bit different:

<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

Primary link

<a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>

Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable toggling in their respective styles.

The checked state for these buttons is only updated via click event on the button.

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

Radio 1 (preselected) Radio 2 Radio 3

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

Methods

Method	Description
`$().button('toggle')`	Toggles push state. Gives the button the appearance that it has been activated.