Button

Buttons are used in two ways — buttons and call to action links. Buttons are always associated with some event — add an item to cart button in shopping sites. Call to actions are used to grab users attention to some specific thing that you want the user to click at. There are various variants of buttons. These classes can be used on both buttons and anchor links

Contained button

Buttons with background color are usually used known as contained buttons and they are used as call to action buttons — usually with primary background. There are other types also such as secondary, danger — to indicate things that might cause something to be deleted, and success — for affirmations.

User can create a button by adding class .btn followed by any of .btn-primary, .btn-secondary, .btn-danger, & .btn-success to create any of the following types of buttons 


<button class="btn btn-primary">primary button</button>
<button class="btn btn-secondary">secondary button</button>
<button class="btn btn-danger">danger button</button>
<button class="btn btn-success">success button</button>

Outline button

These are secondary buttons. They usually have a outline with normal background as the document. They are used to provide a method to invoke an action which the user is likely to do only if he / she doesn't want to do the primary action 


<button class="btn-outline btn-outline-primary">primary button</button>
<button class="btn-outline btn-outline-danger">danger button</button>
<button class="btn-outline btn-outline-success">success button</button>

Link button

These are links — to other parts of the webpage or to other websites. They can also be made rounded by adding a class .btn-rounded

primary link secondary link 

<a href="#" class="link link-primary">primary link</a>
<a href="#" class="link link-secondary rounded">secondary link</a>

Buttons with Icons

These buttons along with text have icons and are generally seen in shopping sites. 


<button class="btn btn-primary">
<div class="fas fa-shopping-cart"></div>
  Add to Cart
</button>
<button class="btn btn-danger">
  <div class="fas fa-trash"></div>
  Delete
</button>
<button class="btn btn-secondary btn-round">
  <div class="fas fa-bookmark"></div>
</button>

Floating action button

these buttons are fixed to a particular part of the viewport and are stacked on top of all the things. the always appear in the viewport and are usually used to provide a way to allow user to scroll to top or open menus 


<button class="btn btn-float btn-float-action" aria-label="floating-button">
  <span><i class="fas fa-plus"></i></span>
</button>
 Button
Card