Contained Buttons
These buttons are filled with the action color. In order to use buttons use class name btn and then followed by class name for type of button.
eg: btn btn-primary this gives a button of primary color.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
Outline Buttons
Outline buttons have a border of action color and on hover gets filled with action color. In order to use buttons use class name btn and then followed by class name for type of outline button.
eg: btn btn-primary-outline this gives a outline button of primary color.
<button class="btn btn-primary-outline">Primary</button>
<button class="btn btn-secondary-outline">Secondary</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-warning-outline">Warning</button>
<button class="btn btn-danger-outline">Danger</button>
<button class="btn btn-info-outline">Info</button>
Buttons with Icons
Buttons can have icons inside them, simply add an icon of your choice.
<button class="btn btn-primary">
<i class="fas fa-shopping-cart"></i>
Add to cart
</button>
<button class="btn btn-primary">
<i class="far fa-trash-alt"></i>
Remove
</button>
<button class="btn btn-icon">
<i class="fas fa-times"></i>
</button>
Link Buttons
Any anchor tag can be turned into a buttons by using classname
btn
and then followed by class name btn-link
eg: btn btn-link tex-primary this gives a link button with text of primary color.
<a class="btn btn-link text-primary" href="#">Link Button</a>
<a class="btn btn-link text-secondary" href="#">Link Button</a>
Buttons Sizes
Buttons can additionally have two more sizes, large and small. In order to use button sizes
use classes btn-lg and btn-sm
<button class="btn btn-lg btn-primary">Large</button>
<button class="btn btn-sm btn-primary">Small</button>
Float Buttons
Float Buttons are used with positioning according to use case scenario, for eg: scroll to top of page. In order to use float button use class btn-float
<button class="btn-float btn-primary">
<i class="fas fa-plus"></i>
</button>
<button class="btn-float btn-primary">
<i class="fas fa-arrow-up"></i>
</button>
<button class="btn-float btn-primary">
<i class="fas fa-arrow-down"></i>
</button>