Buttons

Button styles can be applied to any element with the .btn class applied. Basically, you'll want to apply these to only <a> and <button>, <input> elements.

Buttons are the primary elements provided by bootstrap which are modified by extending the bootstrap variables to make them as per theme. Chankya provided two types of variants for buttons solid and outline you see following style.

//--- Solid Button Varients ---//
<button class="btn btn-primary mr-1 mb-1" type="button">.btn-primary</button>
<button class="btn btn-secondary mr-1 mb-1" type="button">.btn-secondary</button>
<button class="btn btn-success mr-1 mb-1" type="button">.btn-sucess</button>
<button class="btn btn-info mr-1 mb-1" type="button">.btn-info</button>
<button class="btn btn-warning mr-1 mb-1" type="button">.btn-warning</button>
<button class="btn btn-danger mr-1 mb-1" type="button">.btn-danger</button>
<button class="btn btn-link mr-1 mb-1" type="button">.btn-link</button>
 
//--- Outline Button Varients ---//
<button class="btn btn-outline-primary mr-1 mb-1" type="button">.btn-primary</button>
<button class="btn btn-outline-secondary mr-1 mb-1" type="button">.btn-secondary</button>
<button class="btn btn-outline-success mr-1 mb-1" type="button">.btn-sucess</button>
<button class="btn btn-outline-info mr-1 mb-1" type="button">.btn-info</button>
<button class="btn btn-outline-warning mr-1 mb-1" type="button">.btn-warning</button>
<button class="btn btn-outline-danger mr-1 mb-1" type="button">.btn-danger</button>
<button class="btn btn-link mr-1 mb-1" type="button">.btn-link</button>

Last updated