Main Color Classes in Bootstrap with Example

Bootstrap Color Classes

In this article, we will see different types of bootstrap color classes. Bootstrap provides various text color-related , and we understand how to use them step-by-step.

Types of font color classes

  • text-primary : Displays text in blue color
  • text-secondary: displays text in mid gray color
  • text-success: displays text in green color
  • text-warning: displays text in yellow color
  • text-info: displays text in cyan (fairy tale blue) color
  • text-danger:displays text in red color
  • text-dark: displays text in dark gray color
  • text-light : displays text in light gray color
  • text-white : displays text in white color
  • text-muted : displays text in mid gray color
  • text-hide : displays text in transparent color

Example code:

<p class="text-primary">Some text</p>
<p class="text-secondary">Some text</p>
<p class="text-success">Some text</p>
<p class="text-warning">Some text</p>
<p class="text-info">Some text</p>
<p class="text-danger">Some text</p>
<p class="text-dark">Some text</p>
<p class="text-light">Some text</p>
<p class="text-whité">Some text</p>
<p class="text-muted">Some text</p>
<p class="text-hide">Some text</p>

Output:

bootstrap color classes

Leave a Reply