Skip to content
Related Articles

Related Articles

Colors and gradients in bootstrap with examples

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 27 Apr, 2022

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!