Bootstrap 4 - Colors

Use the contextual classes to change the color of text, link (using classes like text-primary, text-secondary etc) and background color (using classes like bg-primary, bg-secondary etc) of an element.
The following example shows changing color of the text by using contextual classes −
<html lang = "en">
   <head>
      <!-- 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" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Text Color</h2>
         <p class = "text-primary">Color : text-primary </p>
         <p class = "text-secondary">Color : text-secondary</p>
         <p class = "text-success">Color : text-success</p>
         <p class = "text-danger">Color : text-danger</p>
         <p class = "text-warning">Color : text-warning</p>
         <p class = "text-info">Color : text-info</p>
         <p class = "text-black-50">Color : text-black-50</p>
         <p class = "text-dark">Color : text-dark</p>
         <p class = "text-body">Color : text-body</p>
         <p class = "text-muted">Color : text-muted</p>
         <p class = "text-white bg-dark">Color : text-white</p>
         <p class = "text-light bg-dark">Color : text-light</p>
         <p class = "text-white-50 bg-dark">Color : text-white-50</p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Color : text-primary 
Color : text-secondary
Color : text-success
Color : text-danger
Color : text-warning
Color : text-info
Color : text-black-50
Color : text-dark
Color : text-body
Color : text-muted
Color : text-white
Color : text-light
Color : text-white-50
The following example shows changing color of the link by using contextual classes −
<html lang = "en">
   <head>
      <!-- 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" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Link Color</h2>
         <p><a href = "#" class = "text-primary">Primary link</a></p>
         <p><a href = "#" class = "text-secondary">Secondary link</a></p>
         <p><a href = "#" class = "text-success">Success link</a></p>
         <p><a href = "#" class = "text-danger">Danger link</a></p>
         <p><a href = "#" class = "text-warning">Warning link</a></p>
         <p><a href = "#" class = "text-info">Info link</a></p>
         <p><a href = "#" class = "text-dark">Dark link</a></p>
         <p><a href = "#" class = "text-muted">Muted link</a></p>
         <p><a href = "#" class = "text-light bg-dark">Light link</a></p>
         <p><a href = "#" class = "text-white bg-dark">White link</a></p>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Dark link
Muted link
Light link
White link
The following example shows the changing background color of an element by using contextual classes −
<html lang = "en">
   <head>
      <!-- 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" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Background Color</h2>
         <div class = "p-3 mb-2 bg-primary text-white">class = 'bg-primary'</div>
         <div class = "p-3 mb-2 bg-secondary text-white">class = 'bg-secondary'</div>
         <div class = "p-3 mb-2 bg-success text-white">class = 'bg-success'</div>
         <div class = "p-3 mb-2 bg-danger text-white">class = 'bg-danger'</div>
         <div class = "p-3 mb-2 bg-warning text-dark">class = 'bg-warning'</div>
         <div class = "p-3 mb-2 bg-info text-white">class = 'bg-info'</div>
         <div class = "p-3 mb-2 bg-light text-dark">class = 'bg-light'</div>
         <div class = "p-3 mb-2 bg-dark text-white">class = 'bg-dark'</div>
         <div class = "p-3 mb-2 bg-white text-dark">class = 'bg-white'</div>
         <div class = "p-3 mb-2 bg-transparent text-dark">class = 'bg-transparent'</div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>
It will produce the following result −

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page