Default

Apply .btn class to give default styling.

.btn-primary

.btn-outline-primary

<button class="btn btn-primary mb-2">Primary</button>

<button class="btn btn-outline-primary mb-2">Primary</button>

Rounded

Use .btn-rounded to make buttons rounded.

<button class="btn btn-primary btn-rounded mb-2">Primary</button>

<button class="btn btn-outline-primary btn-rounded mb-2">Primary</button>

Solid

Apply .btn-* class followed by .btn class to create default buttons.


<!-- Primary -->
<button class="btn btn-primary mb-2">Primary</button>

<!-- Info -->
<button class="btn btn-info mb-2">Info</button>

<!-- Success -->
<button class="btn btn-success mb-2">Success</button>

<!-- Warning -->
<button class="btn btn-warning mb-2">Warning</button>

<!-- Danger -->
<button class="btn btn-danger mb-2">Danger</button>

<!-- Secondary -->
<button class="btn btn-secondary mb-2">Secondary</button>

<!-- Dark -->
<button class="btn btn-dark mb-2">Dark</button>

Outline

Apply .btn-outline-* class followed by .btn class to create outline buttons.


<!-- Primary -->
<button class="btn btn-outline-primary mb-2">Primary</button>

<!-- Info -->
<button class="btn btn-outline-info mb-2">Info</button>

<!-- Success -->
<button class="btn btn-outline-success mb-2">Success</button>

<!-- Warning -->
<button class="btn btn-outline-warning mb-2">Warning</button>

<!-- Danger -->
<button class="btn btn-outline-danger mb-2">Danger</button>

<!-- Secondary -->
<button class="btn btn-outline-secondary mb-2">Secondary</button>

<!-- Dark -->
<button class="btn btn-outline-dark mb-2">Dark</button>

Button Sizes

<button class="btn btn-primary mb-4 mr-2 btn-lg">Large button</button>

<button class="btn btn-secondary mb-4 mr-2">Default button</button>

<button class="btn btn-warning mb-4 mr-2 btn-sm">Small button</button>

<button class="btn btn-dark mb-4 mr-2 btn-sm disabled">Disabled Button</button>

Button with Icons

<button class="btn btn-primary mb-2 mr-2"><svg> ... </svg> Left</button>

<button class="btn btn-warning mb-2 mr-2 btn-rounded">Right <svg> ... </svg></button>

<button class="btn btn-danger mb-2 mr-2"><svg> ... </svg></button>

<button class="btn btn-dark mb-2 mr-2 rounded-circle"><svg> ... </svg></button>

Block Buttons

Link 
<button class="btn btn-primary btn-block mb-4 mr-2">Button</button>

<input type="submit" class="btn btn-info btn-block mb-4 mr-2" value="Input">

<a href="javascript:void(0);" class="btn btn-success btn-block mb-4 mr-2">Link</a>

Copyright © 2021 DesignReset, All rights reserved.

Coded with