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,

Code Snippet:
<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/>
Output:
Bootstarp button colors.
Bootstarp button colors.
-

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


Author: Rakesh
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

Copyright © Code2care 2023 | Privacy Policy | About Us | Contact Us | Sitemap