Colors and gradients in bootstrap with examples - GeeksforGeeks

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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        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="https://code.jquery.com/jquery-3.3.1.slim.min.js"        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"        crossorigin="anonymous"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"        crossorigin="anonymous"></script>    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"        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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"        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
ysachin2314
sahilintern
Picked
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?
How to set Bootstrap Timepicker using datetimepicker library ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?