Bootstrap Colors

The bootstrap has provided a different type of classes to convey the information with different colors.

 

Following are the different type of handful classes which are available in bootstrap to convey the information through colors.

 

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

These contextual classes are helpful to convey the meaningful message with colors. For example, if we use .text-success class it will show the message in green color. Same way, if we use .text-danger class it will show the message in red color.

 

Live Preview

<div class="container">

    <p class="text-primary">It's primary text message</p>

    <p class="text-secondary">It's secondary text message</p>

    <p class="text-success">It's success text message</p>

    <p class="text-danger">It's danger text message</p>

    <p class="text-warning">It's warning text message</p>

    <p class="text-info">It's info text message</p>

    <p class="text-light bg-dark">It's light text message</p>

    <p class="text-dark">It's dark text message</p>

    <p class="text-muted">It's muted text message</p>   

</div>

The above example will return the result like as shown below.

 

Bootstrap text colors example result

Bootstrap Text Colors on Hyperlinks

We can also use these text color classes on hyperlinks or anchor tags. These color classes will provide hover and focus states for anchor tags.

 

Following is the example of applying text color classes on anchor tags or hyperlinks in bootstrap.

 

Live Preview

<div class="container">

    <p><a href="#" class="text-primary">Primary link</a></p>

    <p><a href="#" class="text-secondary">Secondary link</a></p>

    <p><a href="#" class="text-success">Success link</a></p>

    <p><a href="#" class="text-danger">Danger link</a></p>

    <p><a href="#" class="text-warning">Warning link</a></p>

    <p><a href="#" class="text-info">Info link</a></p>

    <p><a href="#" class="text-light bg-dark">Light link</a></p>

    <p><a href="#" class="text-dark">Dark link</a></p>

    <p><a href="#" class="text-muted">Muted link</a></p>

    <p><a href="#" class="text-white bg-dark">White link</a></p>

</div>

The above example will return the result like as shown below.

 

Bootstrap hyperlinks with text colors example result

 

In bootstrap, you can also add 50% opacity for white or black text with .text-white-50 or .text-black-50 classes like as shown below based on your requirements.

 

<div class="container bcontent">

    <p class="text-black-50">Black text with 50% opacity</p>

    <p class="text-white-50">White text with 50% opacity</p>

</div>

Bootstrap Background Color Classes

Same like text color classes, we have background color classes in bootstrap to set the background color for elements.

 

The background color classes will not set the text color. So, to change the text color you need to use both background and text color classes together.

 

Following are the different type of background contextual classes which are available in bootstrap to set the background for the elements.

 

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

These contextual classes are helpful to set the background color for the required elements. For example, if we use .bg-success class it will set the green background color. Same way, if we use .bg-danger class it will set the red background color for an element.

 

Live Preview

<div class="container bcontent">

    <p class="bg-primary text-white">Primary Background</p>

    <p class="bg-secondary text-white">Secondary Background</p>

    <p class="bg-success text-white">Success Background</p>

    <p class="bg-danger text-white">Danger Background</p>

    <p class="bg-warning text-dark">Warning Backgroun</p>

    <p class="bg-info text-white">Info Background</p>

    <p class="bg-light text-dark">Light Background</p>

    <p class="bg-dark text-white">Dark Background</p>

    <p class="bg-white text-dark">White background</p>

    <p class="bg-transparent text-dark">Transparent background</p>

</div>

The above example will return the result like as shown below.

 

Bootstrap background color classes example result 

 

This is how we can use the text or background color classed in bootstrap to set the text color or background color of elements.

 

PREVIOUS

Bootstrap Code
 

Topics Covered