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 Info:

Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.

Follow him on: X

You can also reach out to him via e-mail: rakesh@code2care.org



















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