Bootstrap 5 Background Color

Bootstrap is designed for front-end web development that prioritizes mobile responsiveness. It facilitates quicker web page design due to its built-in CSS, JS, etc.

Bootstrap 5 provides a few color utility classes, using which you may use a background color to convey a message. It includes support for opacity, lightning, and darkening, as well as dynamic backdrop colors on different triggers. 

Bootstrap 5 Background color Class:

• .bg-primary: This class gives a primary color as the background.
• .bg-success: This class gives a green background.
• .bg-info: This class gives a teal background.
•  .bg-warning: This class gives a yellow background.
• .bg-danger: This class gives a red background.
•  .bg-secondary: This class gives a gray background.
• .bg-dark: This class gives a dark gray background.
•  .bg-light: This class gives a light gray background.
• .bg-transparent: This class gives a transparent background.

Example: Here is an example of all informative background color classes.

Output:

Example 2: In this example, we will use normal background color classes like white, black, transparent, etc.

Output:

Reference: https://getbootstrap.com/docs/5.0/utilities/background/#background-color