How to Use Buttons in Bootstrap 4

Bootstrap 4 provides a lot of different style of buttons like colored buttons, block buttons, outline buttons etc. Different sizes of buttons can be used in bootstrap 4 using classes like .btn-lg and .btn-sm. Here we have described bootstrap 4 buttons.

Bootstrap 4 buttons style

Bootstrap 4 uses different styles of buttons. Check below.

<button class="btn">Basic Button</button>
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-link">Link Button</button>

Bootstrap 4 buttons

Bootstrap 4 button classes can be used on <a>, <button>, or <input> html elements:

Bootstrap 4 Outline Buttons

Bootstrap 4 provides the classes for outline buttons.

<button class="btn btn-outline-primary">Primary Button</button>
<button class="btn btn-outline-secondary">Secondary Button</button>
<button class="btn btn-outline-success">Success Button</button>
<button class="btn btn-outline-info">Info Button</button>
<button class="btn btn-outline-warning">Warning Button</button>
<button class="btn btn-outline-danger">Danger Button</button>
<button class="btn btn-outline-dark">Dark Button</button>
<button class="btn btn-outline-light text-dark">Light Button</button>

Image

Bootstrap 4 button sizes

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

Bootstrap 4 Blocked Button

Just add .btn-block class to make the blocked button in bootsrap 4

<button class="btn btn-primary btn-block">Full-Width Button</button>

Bootstrap 4 active/disable buttons

To make the .active button just add .active class and to make the disable button, add .disabled class. You can use classes on anchor and buttons.

<button class="btn btn-primary active">Active Primary</button>
<button class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Bootstrap 4 Spinner buttons

Here is how to use bootstrap 4 spinner buttons.

<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>

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

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