Bootstrap 5 Background Color
Last Updated :
06 Jan, 2023
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.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Background color</ title >
< link rel = "stylesheet" href =
</ head >
< body class = "ms-2 me-2" >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Background colors</ strong >
< div class = "p-3 mb-2 bg-primary text-white" >
.bg color-primary</ div >
< div class = "p-3 mb-2 bg-secondary text-white" >
.bg-secondary</ div >
< div class = "p-3 mb-2 bg-success text-white" >
.bg-success</ div >
< div class = "p-3 mb-2 bg-danger text-white" >
.bg-danger</ div >
< div class = "p-3 mb-2 bg-warning text-dark" >
.bg-warning</ div >
< div class = "p-3 mb-2 bg-info text-dark" >
.bg-info</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 bg-color
Example 2: In this example, we will use normal background color classes like white, black, transparent, etc.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Background color</ title >
< link rel = "stylesheet" href =
</ head >
< body class = "ms-2 me-2" >
< div class = "text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< strong >Bootstrap 5 Background colors</ strong >
< div class = "p-3 mb-2 bg-light text-dark" >
.bg-light</ div >
< div class = "p-3 mb-2 bg-dark text-white" >
.bg-dark</ div >
< div class = "p-3 mb-2 bg-body text-dark" >
.bg-body</ div >
< div class = "p-3 mb-2 bg-white text-dark" >
.bg-white</ div >
< div class = "p-3 mb-2 bg-transparent text-dark" >
.bg-transparent</ div >
</ div >
</ body >
</ html >
|
Output:
Bootstrap bg-color
Reference: https://getbootstrap.com/docs/5.0/utilities/background/#background-color
Share your thoughts in the comments
Please Login to comment...