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...