Related Articles

Related Articles

Colors and gradients in bootstrap with examples
  • Last Updated : 28 Mar, 2019

Bootstrap provides various classes to apply color properties to various elements.

Create a HTML file with the CDN links to Jquery and Bootstrap.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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" 
   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 -->
  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
    <script
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
    <script 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
  </body>
</html>

chevron_right


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-

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


The output of these paragraph elements is as follows-

Color for background of elements-
It also has classes for background color-



filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Above code shows following output-

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Above code shows following output-




My Personal Notes arrow_drop_up
Recommended Articles
Page :