Bootstrap 4 Buttons

Bootstrap 4 provides nine predefined styles for buttons — each serving a different semantic purpose.

To style a button, use Bootstrap's .btn class, followed by the desired style. For example, class="btn btn-primary" results in a primary button.

Here's the code used for all nine button styles:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-info">Info</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>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 introduced the .btn-secondary, .btn-light, and .btn-dark classes.

Bootstrap 4 dropped the .btn-default class, which is included in Bootstrap 3's semantic button classes.

Button Elements

Bootstrap 4's button styles are designed to be used with the <button> element, but they can also be applied to <input> and <a> elements.

You can also apply the button styles to a <label> element when working with checkboxes and radio buttons (more on that below).

<a class="btn btn-primary" href="#" role="button">Anchor</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

When using the <a> element to behave as a button (eg, triggering a client-side script, rather than navigating to another URL), use role="button".

It is recommended to use the <button> element whenever possible, as this has the best consistency across browsers.

Button Outlines

Use Bootstrap 4's .btn-outline-* classes to apply the semantic color to the outline only.

<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-info">Info</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>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Bootstrap 4 vs Bootstrap 3

Outline buttons are new in Bootstrap 4.

No Outlines for Link Buttons

There is no outline for link buttons (i.e. there is no .btn-outline-link class).

Button Size

You can specify the button size with Bootstrap's .btn-lg and .btn-sm classes. Place these in addition to the other button classes. Like this:

<button type="button" class="btn btn-success btn-sm">Small</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-success btn-lg">Large</button>

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 has dropped the .btn-xs for extra small buttons.

Block Level Buttons

A block level button spans the width of its parent. You can create a block level button by adding Bootstrap's .btn-block class.

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

Disabled Buttons

Bootstrap provides specific styles for the disabled state (as well as for other states, such as active).

If you need to disable a button that uses an <a> element, you can use Bootstrap's .disabled class.

You don't need to do this on buttons that use the <button> and <input> elements. To disable those buttons, use the standard HTML disabled attribute.

<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a></p>

<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button></p>

<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element"></p>

Bootstrap uses the non-standard (at the time of writing) pointer-events: none to disable link buttons (those buttons created with the <a> element). Although this works in many cases, it doesn't work in all cases. Therefore, you should also use JavaScript to disable any link button functionality (or just use a <button> element if you can).

Toggle Checkboxes & Radio Buttons

You can apply the Bootstrap 4 button styles to radio buttons and checkboxes to provide a toggle feature.

To do this, nest the checkboxes or radio buttons inside a <label> element that has the applicable button class applied.

Also, nest the elements inside a .btn-group element that also has data-toggle="buttons" applied.

Checkboxes

Click some buttons to see the toggle effect.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" name="options" id="option1" autocomplete="off" checked> Boots
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option2" autocomplete="off"> Shoes
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" name="options" id="option3" autocomplete="off"> Feet
  </label>
</div>

Radio Buttons

Click some buttons to see the toggle effect.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Boots
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Shoes
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Feet
  </label>
</div>