Bootstrap Colors

Bootstrap provides a set of contextual color classes that you can use to style various elements. These classes are named based on color names or contextual meanings. Here are some of the commonly used Bootstrap color classes:

Text Color Classes:

'.text-primary': Sets the text color to the primary color.

'.text-secondary': Sets the text color to the secondary color.

'.text-success', '.text-danger', '.text-warning', '.text-info': Sets text color based on contextual meaning.

Background Color Classes:

.bg-primary': Sets the background color to the primary color.

'.bg-secondary': Sets the background color to the secondary color.

'.bg-success', '.bg-danger', '.bg-warning', '.bg-info': Sets background color based on contextual meaning.

Contextual Classes:

'.text-light', '.bg-light': Sets text or background color to a light color.

'.text-dark',' .bg-dark': Sets text or background color to a dark color.

Example

<div class="container mt-3">
 <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

You can click on above box to edit the code and run again.

Output

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).

Example

<div class="bg-primary text-white">
  This is a content with primary background color
</div>


<div class="bg-success text-dark">
  This is a content with success background color
</div>


<div class="bg-warning text-dark">
  This is a content with warning background color
</div>

You can click on above box to edit the code and run again.