Bootstrap4 Buttons
Bootstrap 4 provides buttons with different styles.
Example
<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>
Try it Yourself »
Button classes can be used on<a>, <button>, or<input>elements:
Example
<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">
Try it Yourself »
Button Outline
Example
<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>
Try it Yourself »
Different Size Buttons
Bootstrap 4 allows you to set the size of buttons:
Example
<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>
Try it Yourself »
Block Level Buttons
By adding the.btn-blockclass, you can create block-level buttons:
Active and Disabled Buttons
Buttons can be set to an active or disabled (non-clickable) state.
.activeThe class can set a button to be active,disabledThe disabled attribute can set a button to be non-clickable. Note: The <a> element does not support the disabled attribute; you can add the.disabledclass to the link to prevent clicks.
Example
<button type="button" class="btn btn-primary active">Active Button</button>
<button type="button" class="btn btn-primary" disabled>Disabled Button</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Try it Yourself »
Loading Buttons
We can also create a button that is loading.
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>
<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>
Try it Yourself »