Skip to content
Related Articles

Related Articles

Improve Article

How to add background color to a div in Bootstrap ?

  • Difficulty Level : Medium
  • Last Updated : 09 Aug, 2021
Geek Week

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=
    <script src=
    </script>     
    <script src=
    </script>     
    <script src=
    </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=
    <script src=
   </script>     
    <script src=
    </script>     
    <script src=
    </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)




My Personal Notes arrow_drop_up
Recommended Articles
Page :