---
title: "How many types of background-colors classes are there in Bootstrap?"  
description: "How many types of background-colors classes are there in Bootstrap?"  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93852/how-many-types-of-background-colors-classes-are-there-in-bootstrap  
category: "web application"  
tags: ["web application development", "web development"]  
reading_time: 1 minute  

---

# How many types of background-colors classes are there in Bootstrap?

How many types of [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)-[colors](https://yourviews.mindstick.com/story/1830/8-crazy-facts-about-colors-that-will-blow-your-mind) classes are there in [Bootstrap](https://www.mindstick.com/articles/43948/top-free-resources-for-learning-and-perfecting-bootstrap-programming)?

## Answers

### Answer by Ravi Vishwakarma

in bootstrap, there are many types of background color classes for styling the elements in the HTML page.

1. .bg-primary
2. .bg-secondary
3. .bg-success
4. .bg-danger
5. .bg-warning
6. .bg-info
7. .bg-light
8. .bg-dark
9. .bg-white

Example

```
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
<div class='p-2 m-1 rounded bg-primary text-white'>.bg-primary</div>
<div class='p-2 m-1 rounded bg-secondary text-white'>.bg-secondary</div>
<div class='p-2 m-1 rounded bg-success text-white'>.bg-success</div>
<div class='p-2 m-1 rounded bg-danger text-white'>.bg-danger</div>
<div class='p-2 m-1 rounded bg-warning text-dark'>.bg-warning</div>
<div class='p-2 m-1 rounded bg-info text-white'>.bg-info</div>
<div class='p-2 m-1 rounded bg-light text-dark'>.bg-light</div>
<div class='p-2 m-1 rounded bg-dark text-white'>.bg-dark</div>
<div class='p-2 m-1 rounded bg-white text-dark'>.bg-white</div>
</div>
</body>
</html>
```

Output

![How many types of background-colors classes are there in Bootstrap?](https://answers.mindstick.com/questionanswer/ab962c4b-33df-4bee-bc92-022f06bd4e27/images/42c4868b-80ca-4f92-bde5-13039b321504.png)\


---

Original Source: https://answers.mindstick.com/qa/93852/how-many-types-of-background-colors-classes-are-there-in-bootstrap

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
