Bootstrap Background Color Classes

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:

bootstrap background color classes

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

Leave a Reply