 |
VOOZH | about |
|
VOOZH | about |
Bootstrap provides many classes to set the background color of an element. We can easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Some classes of background colors are listed below example.
We can add background color to a div by simply adding class "bg-primary", "bg-success", "bg-danger", "bg-info", and many more as shown in the following examples.
Step by step guide for the implementation:
Step 1: Include Bootstrap and jQuery CDNinto the <head> tag before all other stylesheets to load our CSS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Step 2: Add <div> tag in the HTML body with class container.
Step 3: Add <li>tag with .bg-primary, .bg-success and so on classes in the <body> tag.
Example 1: The following example shows different background-color classes to set the background color of a content.
Output:
Example 2: The following example shows how to add background color and other classes to HTML div.
Output:
