How to Colorize Text and Colors using Bootstrap 5 Color Utilities

Colorizing text and links using Bootstrap 5

Bootstrap 5 has utility classes for coloring text and links. In this tutorial, we will show you how to use those utility classes for text and link color.

Color utility classes available for text

The following utility classes are available for text color:

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

An example of using text classes in paragraphs

In this example, each available text class is used in the paragraph. The sequence in the code and image below is different. Have a look:

Bootstrap5-text-color

Code:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

<div class="container">

<h3>Bootstrap 5 text color</h3>    

<p class="text-primary">This paragraph uses .text-primary class</p>

<p class="text-secondary">This paragraph uses .text-secondary class</p>

<p class="text-dark">This paragraph uses .text-dark class</p>

<p class="text-body">This paragraph uses .text-body class</p>

<p class="text-warning bg-dark">This paragraph uses .text-warning class with .bg-dark backgroud</p>

<p class="text-muted">This paragraph uses .text-muted class</p>

<p class="text-success">This paragraph uses .text-success class</p>

<p class="text-danger">This paragraph uses .text-danger class</p>

<p class="text-white bg-dark">This paragraph uses .text-white class with .bg-dark background</p>

<p class="text-black-50">This paragraph uses .text-black-50 class</p>

<p class="text-white-50 bg-dark">This paragraph uses .text-white-50 class with .bg-dark background</p>

<p class="text-info bg-dark">This paragraph uses .text-info class with .bg-dark background</p>

<p class="text-light bg-dark">This paragraph uses .text-light class with .bg-dark background</p>

</div>

</body>

</html>

Classes available for link coloring

The following utility classes are available for link colors:

  • link-primary
  • link-secondary
  • link-success
  • link-danger
  • link-warning
  • link-info
  • link-light
  • link-dark

Note: The link classes have :hover and :focus states.

An example of using link color utility classes in Bootstrap 5

In this example, we have all color classes for links that change on hover and focus state.

BS 5 Code:

<!DOCTYPE html>
<html>
<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

</head>

<body>

<div class="container">

<h3>Bootstrap 5 link color</h3>      

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-primary">Bootstrap 5</a>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-secondary">Bootstrap 5</a><br>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-success">Bootstrap 5</a>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-danger">Bootstrap 5</a><br>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-warning">Bootstrap 5</a>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-info">Bootstrap 5</a><br>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-light bg-dark">Bootstrap 5</a>

<a href="https://www.jquery-az.com/bootstrap-5/" class="link-dark">Bootstrap 5</a>

</div>

</body>

</html>

Result:

Bootstrap5-link-color

References:

https://getbootstrap.com/docs/5.0/utilities/colors/

https://getbootstrap.com/docs/5.0/helpers/colored-links/

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️