How to add background color to a div in Bootstrap ? - GeeksforGeeks

09 Aug, 2021
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 CDN into 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.
HTML
<!DOCTYPE html><html lang="en">       <head>             <meta charset="utf-8">       <meta name="viewport" content="width=device-width, initial-scale=1">         <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></head>   <body>    <div class="container">        <ul>            <li class="bg-primary">.bg-primary class</li>            <li class="bg-success">.bg-success class</li>            <li class="bg-info">.bg-info class</li>            <li class="bg-warning">.bg-warning class</li>            <li class="bg-danger">.bg-danger class</li>        </ul>    </div></body> </html>
 
Output: 
example of different background colors 
Example 2: The following example shows how to add background color and other classes to HTML div.
First, find the div in your HTML code and add a predefined class to the opening tag.
Add a Bootstrap predefined class to the div you would like to change.
HTML
<!DOCTYPE html><html lang="en">       <head>    <meta charset="utf-8">       <meta name="viewport" content="width=device-width, initial-scale=1">         <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></head>   <body>    <div class="p-3 mb-2 bg-primary text-white">.bg-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-white">.bg-info</div></body>   </html>
Output:
background color of div tag (these spaces in between each div is padding)
Bootstrap-4
Bootstrap-Questions
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?