Open In App
Related Articles

Colors and gradients in bootstrap with examples

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bootstrap provides various classes to apply color properties to various elements. 
Create an 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" href=
        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 -->
    <script src=
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src=
        integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src=
        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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
       content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <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>
 
</body>
</html>

                    

Output:

Color for the background of elements:
It also has classes for background color.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <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>
</body>
</html>

                    

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
        integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h3>GeeksForGeeks Bootstrap Colors</h3>
    <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>
</body>
</html>

                    

Output:

Supported Browser:

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


Last Updated : 27 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads