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 5 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages