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:
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).
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.
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:
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.
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.
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.
Radio Buttons
Click some buttons to see the toggle effect.