Bootstrap 5 Background
Last Updated :
30 Nov, 2022
Bootstrap 5 Background is used with the help of the keyword bg. It offers various colors like primary, success, info, warning, danger, secondary, dark, and light.
- Background Color: The background color of the elements is set to contextual class like .bg-primary, .bg-success, and so on.
- Background gradient: A linear gradient is applied to the backgrounds by adding color value and the .bg-gradient class to it.
- Sass: This involves the Sass map and spacing utilities that are declared in Utility API.
Below examples illustrate the Bootstrap 5 Background:
Example 1: The following code demonstrates different background Color classes of Bootstrap 5.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "text-center text-success" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" >
Bootstrap 5 Background
</ h2 >
< div class = "p-3 mb-2 bg-primary text-white" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-secondary text-white" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-success text-white" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-danger text-white" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-warning text-dark" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-info text-dark" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-light text-dark" >
Hello World
</ div >
< div class = "p-3 mb-2 bg-dark text-white" >
Hello World
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Background
Example 2: The following code demonstrates different background Gradient classes.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body >
< h1 class = "text-center text-success" >
GeeksforGeeks
</ h1 >
< h2 class = "text-center" > Bootstrap 5 Background</ h2 >
< div class = "p-3 mb-2 bg-info bg-gradient" >
.bg-info.bg-gradient
</ div >
< div class = "p-3 mb-2 bg-light bg-gradient" >
.bg-light.bg-gradient
</ div >
< div class = "p-3 mb-2 text-white bg-dark bg-gradient" >
.bg-dark.bg-gradient
</ div >
</ body >
</ html >
|
Output:
Bootstrap 5 Background
Reference: https://getbootstrap.com/docs/5.0/utilities/background/
Share your thoughts in the comments
Please Login to comment...