How to Change the Background Color in Bootstrap 5 with examples
Description
Bootstrap is a popular CSS framework that helps developers to create responsive and mobile-first websites quickly. Bootstrap 5 is the latest version of this framework, and it comes with many features that make website development easier than ever before. In this article, we will discuss how to change the background color in Bootstrap 5.
Bootstrap 5 comes with a variety of built-in classes that can be used to style HTML elements. One of the most commonly used classes is the “bg-” class, which is used to set the background color of an element. There are several options available for this class, such as “bg-primary”, “bg-secondary”, “bg-success”, “bg-danger”, “bg-warning”, “bg-info”, and “bg-light”. You can also use the “bg-dark” class to set a dark background color.
To change the background color of an element in Bootstrap 5, you need to add the “bg-” class followed by the color option to the HTML element. For example, if you want to set the background color of a div element to blue, you can use the following code:
1 | <div class="bg-primary">This is a blue background</div> |
in this example, we have used the “bg-primary” class to set the background color of the div element to blue. You can use any of the other available color options to set the background color of the element.
If you want to create a custom background color, you can use the “bg-” class followed by a hexadecimal color code. For example, if you want to set the background color of an element to a light green color, you can use the following code:
1 | <div class="bg-#98FB98">This is a light green background</div> |
In this example, we have used the hexadecimal color code #98FB98 to set the background color of the div element to a light green color. You can use any other hexadecimal color code to set the background color of the element.
Additionally, you can also use the “bg-gradient-” class to set a gradient background color. Bootstrap 5 provides several options for gradient background colors, such as “bg-gradient-primary”, “bg-gradient-secondary”, “bg-gradient-success”, “bg-gradient-danger”, “bg-gradient-warning”, “bg-gradient-info”, and “bg-gradient-light”. You can use any of these classes to set a gradient background color.
Changing the Background Color in Bootstrap 5
There are 10 classes to change the background color in Bootstrap 5:
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
By changing the background color, the text color doesn’t immediately follow. We need to use a combination of color and background color if we want to change the text color and background color at the same time. Here’s an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Background Color Tutorial</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <style> div > div { border: 1px solid black; width: 120px; height: 50px; margin: 0.3em; padding: 10px 0; text-align: center; float: left; } </style> </head> <body> <div class="container"> <div class="bg-primary text-white">.bg-primary</div> <div class="bg-secondary text-white">.bg-secondary</div> <div class="bg-success text-white">.bg-success</div> <div class="bg-danger text-white">.bg-danger</div> <div class="bg-warning text-dark">.bg-warning</div> <div class="bg-info text-white">.bg-info</div> <div class="bg-light text-dark">.bg-light</div> <div class="bg-dark text-white">.bg-dark</div> <div class="bg-white text-dark">.bg-white</div> <div class="bg-transparent text-dark">transparent</div> </div> <script src="js/bootstrap.bundle.js"></script> </body> </html> |
In this example I combined the class text-color with bg-color . Notice that Bootstrap has a ” theme ” of its own, whereby if that class contains the word primary, it will be blue, as well as all other colors.
Make Background Color with Gradient
Bootstrap 5 adds a new class to add a gradient effect to the background color. To do this, add the .bg-gradient class like the following example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Background Color Tutorial</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <style> div > div { border: 1px solid black; width: 200px; height: 100px; margin: 0.3em; padding: 35px 0; text-align: center; float: left; } </style> </head> <body> <div class="container"> <div class="bg-primary text-white bg-gradient">.bg-primary</div> <div class="bg-secondary text-white bg-gradient">.bg-secondary</div> <div class="bg-success text-white bg-gradient">.bg-success</div> <div class="bg-danger text-white bg-gradient">.bg-danger</div> <div class="bg-warning text-dark bg-gradient">.bg-warning</div> <div class="bg-info text-white bg-gradient">.bg-info</div> <div class="bg-dark text-white bg-gradient">.bg-dark</div> </div> <script src="js/bootstrap.bundle.js"></script> </body> </html> |
With the addition of the .bg-gradient class , the background color has a gradient at the top. The resulting effect is not very visible, but if you pay close attention the color on the top side is slightly whiter than the color on the bottom side of the element.
In this tutorial, we have discussed how to change the background color using Bootstrap, including creating a gradient effect. In my previous article, I explained how to make badge buttons in Bootstrap 5.
