Bootstrap 4 Button

Bootstrap 4 provides 9 different style classes for button. These are:

Basic Primary Secondary Success Danger Warning Info Light Dark Link

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

The button classes can also be used on <a>, <button>, or <input> element:

Primary Link Button

<a href="#" class="btn btn-primary" role="button">Primary</a>
<a href="#" class="btn btn-info" role="button">Link Button</a>

Button Outline

If you want to apply only the outline on the button but not the background, than use the .btn-outline-* classes.

Primary Secondary Success Danger Warning Info Light Dark

<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-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Button Sizes

Large Button with btn-lg class

Default Primary Success Info Warning Danger Link

Medium size Button (default)

Default Primary Success Info Warning Danger Link

Small size Button with btn-sm

Default Primary Success Info Warning Danger Link

Block Level Button

A Block level button will expand the width to 100 percent. To create a block level button add ".btn-block" class.

<button class="btn btn-success btn-block">Full width Button.</button>

Full width Button Block.

Active/Disabled Buttons

A button can be set to an active using ".active" class or a disabled button using ".disabled" class.

Syntax:
<button type="button" class="btn btn-danger active">Active Button</button>
<button type="button" class="btn btn-danger disabled">Disabled Button</button>
Active Button Disabled Button