Bootstrap Button Colors Classes

There are various colors that Bootstrap provides for the buttons, there are 8 classes that you can make use of along with btn,

Bootstarp Button Color Classes:

1. btn-primary: Blue
2. btn-secondary: Grey
3. btn-success: Green
4. btn-danger: Red
5. btn-warning: Yellow
6. btn-info: Blueish
7. btn-light: White
8. btn-dark: Black

As you can the buttons are not named as per color but rather what the color signifies, let's see examples and see how they look,

<button type="button" class="btn btn-primary">Primary: Blue</button>
<button type="button" class="btn btn-secondary">Secondary: Grey</button>
<button type="button" class="btn btn-success">Success: Green</button> 
<button type="button" class="btn btn-danger">Danger: Red</button>
<button type="button" class="btn btn-warning">Warning: Yellow</button> 
<button type="button" class="btn btn-info">Info: Blueish</button> 
<button type="button" class="btn btn-light">Light: White</button> 
<button type="button" class="btn btn-dark">Dark: Black</button> <br/>

Facing issues? Have Questions? Post them here! I am happy to answer!

Author Info:

Rakesh is a seasoned developer with over 10 years of experience in web and app development, and a deep knowledge of operating systems. Author of insightful How-To articles for Code2care.

Follow him on: X