Bootstrap4 Buttons

Bootstrap 4 provides various styles of buttons.

Examples

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

Button classes can be used on <a>, <button>, or <input> elements:

Examples

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

Button Outline

Examples

<button type="button" class="btn btn-outline-primary">Primary Button</button>
<button type="button" class="btn btn-outline-secondary">Secondary Button</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</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-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Different Size Buttons

Bootstrap 4 allows setting button sizes:

Examples

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

Block Level Buttons

By adding the .btn-block class, you can create block-level buttons:

Examples

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Active and Disabled Buttons

Buttons can be set to active or disabled states.

The .active class makes a button appear pressed, and the disabled attribute makes a button unclickable. Note that the <a> element does not support the disabled attribute, so you can use the .disabled class to make links appear unclickable.

Examples

<button type="button" class="btn btn-primary active">Clicked Button</button>

<button type="button" class="btn btn-primary" disabled>Disabled Button</button> <a href="#" class="btn btn-primary disabled">Disabled Link</a>

Loading Button

We can also set a button that is in the loading state.

Example

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

&lt;button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

&lt;button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>