Buttons

Default Buttons use class .btn-* for bootstrap button.

Show Code 
<button type="button" class="btn btn-primary">Primary</button>   
<button type="button" class="btn btn-secondary">Secondary</button>  
<button type="button" class="btn btn-success">Success</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-teal">Teal</button> 
<button type="button" class="btn btn-default">Default</button>

Button with outline use class .btn-outline-* for outline button.

Show Code 
<button type="button" class="btn btn-outline-primary">Primary</button>   
<button type="button" class="btn btn-outline-secondary">Secondary</button>  
<button type="button" class="btn btn-outline-success">Success</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-teal">Teal</button> 
<button type="button" class="btn btn-outline-default">Default</button>

Rounded Buttons use class .btn-rounded for round border button.

Show Code 
<button type="button" class="btn btn-rounded btn-secondary">Secondary</button>  
<button type="button" class="btn btn-rounded btn-success">Success</button>
<button type="button" class="btn btn-rounded btn-warning">Warning</button>     
<button type="button" class="btn btn-rounded btn-danger">Danger</button>  
<button type="button" class="btn btn-rounded btn-teal">Teal</button> 
<button type="button" class="btn btn-rounded btn-default">Default</button>

Buttons with Icons use class .btn-rounded for round border button.

Show Code 

    <button type="button" class="btn btn-primary"><i data-feather="eye"></i> View</button>
    <button type="button" class="btn btn-secondary"> <i data-feather="refresh-cw"></i>Refresh</button>
    <button type="button" class="btn btn-success"><i data-feather="edit"></i> Edit</button>
    <button type="button" class="btn btn-warning"><i data-feather="alert-triangle"></i> Warning</button>
    <button type="button" class="btn btn-danger"><i data-feather="trash-2"></i> Delete</button>
    <button type="button" class="btn btn-teal"> <i data-feather="credit-card"></i> Credit Card</button>
    <button type="button" class="btn btn-default"><i data-feather="mail" ></i> Mail</button>

Buttons sizes use class .btn-lg, btn-sm for different sizes button.

Show Code 
<button type="button" class="btn btn-primary btn-lg ">Large button</button>
<button type="button" class="btn btn-success btn-lg ">Large button</button>
<button type="button" class="btn btn-primary btn-sm ">Small button</button>
<button type="button" class="btn btn-success btn-sm ">Small button</button>

Button group use buttons with .btn in .btn-group

Show Code 
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group mt-4 mt-md-0" role="group">
<button type="button" class="btn btn-secondary"><i data-feather="align-right"></i></button>
<button type="button" class="btn btn-secondary"><i data-feather="align-center"></i></button>
<button type="button" class="btn btn-secondary"><i data-feather="align-left"></i></button>
</div>