Skip to content
Related Articles

Related Articles

Improve Article

Colors and gradients in bootstrap with examples

  • Last Updated : 05 Aug, 2021
Geek Week

Bootstrap provides various classes to apply color properties to various elements. 
Create a HTML file with the CDN links to Jquery and Bootstrap. 
 

html




<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
         initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
   integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
    <script
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
    <script
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
  </body>
</html>

After creating the basic HTML file we need to add these elements inside the body of the code and then we can see all the necessary changes. 
Color for text in elements- 
 

html




<p class="text-primary">.text-primary</p>
 
<p class="text-secondary">.text-secondary</p>
 
<p class="text-success">.text-success</p>
 
<p class="text-danger">.text-danger</p>
 
<p class="text-warning">.text-warning</p>
 
<p class="text-info">.text-info</p>
 
<p class="text-light bg-dark">.text-light</p>
 
<p class="text-dark">.text-dark</p>
 
<p class="text-body">.text-body</p>
 
<p class="text-muted">.text-muted</p>
 
<p class="text-white bg-dark">.text-white</p>
 
<p class="text-black-50">.text-black-50</p>
 
<p class="text-white-50 bg-dark">.text-white-50</p>

The output of these paragraph elements is as follows- 
 



Color for background of elements- 
It also has classes for background color- 
 

html




<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>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Above code shows following output- 
 

Gradient background colors- 
To use gradient background colors, you need to set $enable-gradients property to true. By default, it is set to false. 
 

html




<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-white">.bg-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-light">.bg-dark</div>

Above code shows following output- 
 

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :