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.