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>
Be the first to post a comment.