Skip to content
Related Articles

Related Articles

Bootstrap 4 | Colors
  • Last Updated : 31 May, 2019

Text Colors: Bootstrap provides many classes to set the text color of an element. All classes of text colors are listed below:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body
  • .text-light

  

Example: This example uses text color class to set the color of text content.




<!DOCTYPE html>
<html lang="en">
      
<head>
    <title>Bootstrap Color Example</title>
    
    <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">
        <h2>Bootstrap Colors List</h2>
        <ul>
            <li class="text-muted">.text-muted class</li>
            <li class="text-primary">.text-muted class</li>
            <li class="text-success">.text-success class</li>
            <li class="text-info">.text-info class</li>
            <li class="text-warning">.text-warning class</li>
            <li class="text-danger">.text-danger class</li>
            <li class="text-secondary">.text-secondary class</li>
            <li class="text-white">.text-white class</li>
            <li class="text-dark">.text-dark class</li>
            <li class="text-body">.text-body class</li>
            <li class="text-light">.text-light class</li>
        </ul>
    </div>
</body>
  
</html>

Output:

Background Colors: Bootstrap provides many classes to set the background color of an element. All classes of background colors are listed below:



  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Example: This example uses background-color class to set the background color of content.




<!DOCTYPE html>
<html lang="en">
      
<head>
    <title>Bootstrap Background Color Example</title>
    
    <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">
        <h2>Bootstrap Background Colors List</h2>
        <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>
            <li class="bg-secondary">.bg-secondary class</li>
            <li class="bg-dark">.bg-dark class</li>
            <li class="bg-light">.bg-light class</li>
        </ul>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up