Bootstrap Background Color Classes

In this article, I would like to show different types of background color bootstrap classes.

Types of background color classes

• bg-primary: sets the background color with blue color
• bg-secondary: sets the background color with mid gray color
• bg-success: sets the background color with green color
• bg-warning: sets the background color with yellow color
• bg-info: sets the background color with cyan (fairy tale blue) color
• bg-danger: sets the background color with red color
• bg-dark: sets the background color with dark gray color
• bg-light: sets the background color with light gray color
• bg-white: sets the background color with white color

Example code:

<p class="bg-primary">Some text</p>
<p class="bg-secondary">Some text</p>
<p class="bg-success">Some text</p>
<p class="bg-warning">Some text</p>
<p class="bg-info">Some text</p>
<p class="bg-danger">Some text</p>
<p class="bg-dark">Some text</p>
<p class="bg-light">Some text</p>

Output:

So, these are the background-related classes provided by the bootstrap framework.