Bootstrap Text color

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Text Color

Easily set text color by using .text-*{color}* class.

Default colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-dark

.text-grey

.text-black

.text-light

.text-white

<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-dark">.text-dark</p>
<p class="text-grey">.text-grey</p>
<p class="text-black">.text-black</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-white bg-dark">.text-white</p>
Free

Body

Set slightly lighter color for body text to distinguish it from headings. Use .text-body for default black text, and .text-body-light if you have white text on dark background.

.text-body

.text-body-light

<p class="text-body">.text-body</p>
<p class="text-body-light bg-dark">.text-body-light</p>
Free

Muted

Muted color can be used when the text has just an informative function or it hasn’t to be so significant. Add .text-muted for default black text or .text-muted-light for white text on dark background.

.text-muted

.text-muted-light

<p class="text-muted">.text-muted</p>
<p class="text-muted-light bg-dark">.text-muted-light</p>
Free

Black text opacity

Use 10 predefined opacity variants of black text color. Add .text-black-{opacity} class to set a color that nicely blends to your design.

.text-black-5

.text-black-10

.text-black-20

.text-black-30

.text-black-40

.text-black-50

.text-black-60

.text-black-70

.text-black-80

.text-black-90

<p class="text-black-5">.text-black-5</p>
<p class="text-black-10">.text-black-10</p>
<p class="text-black-20">.text-black-20</p>
<p class="text-black-30">.text-black-30</p>
<p class="text-black-40">.text-black-40</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-black-60">.text-black-60</p>
<p class="text-black-70">.text-black-70</p>
<p class="text-black-80">.text-black-80</p>
<p class="text-black-90">.text-black-90</p>
Free

White text opacity

Use 10 predefined opacity variants of white text color. Add .text-white-{opacity} class to set a color that nicely blends to your design.

.text-white-5

.text-white-10

.text-white-20

.text-white-30

.text-white-40

.text-white-50

.text-white-60

.text-white-70

.text-white-80

.text-white-90

<p class="text-white-5">.text-white-5</p>
<p class="text-white-10">.text-white-10</p>
<p class="text-white-20">.text-white-20</p>
<p class="text-white-30">.text-white-30</p>
<p class="text-white-40">.text-white-40</p>
<p class="text-white-50">.text-white-50</p>
<p class="text-white-60">.text-white-60</p>
<p class="text-white-70">.text-white-70</p>
<p class="text-white-80">.text-white-80</p>
<p class="text-white-90">.text-white-90</p>
Pro

Custom color with hover

Quickly set text color without adding new lines to your stylesheet by using data-text-color="{color} h:{color}" attribute. This utility uses a JavaScript so you can any CSS color format.

Custom text color

Custom text color with hover

<p class="text[#7616ef]">Custom text color</p>
<p class="text[#1fd5a1]" data-fx="h:text[rgba(0,0,0,.2)]">Custom text color with hover</p>

Default

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

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

Torus Kit allows to set the color for all links at once by adding .links-{light|dark} to the parent element. This way you don’t need to add .text-* for every link.

Although this paragraph has .text-white class, but This link has still default color.

<div class="bg-primary bg-a-70 p-3">
  <p class="text-white">Although this paragraph has <em>.text-white</em> class, but <a href="#">This link</a> has still default color.</p>
  <p class="text-white links-light">This paragraph is white and <a href="#">This link</a> is white also.</p>

  <!-- You can style a navigation list, too -->
  <nav class="nav links-light bg-black bg-a-10">
    <a class="nav-link" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
  </nav>
</div>

Although this paragraph has .text-dark class, but This link has still default color.

<p class="text-dark">Although this paragraph has <em>.text-dark</em> class, but <a href="#">This link</a> has still default color.</p>
<p class="text-dark links-dark">This paragraph is dark and <a href="#">This link</a> is dark also.</p>

<!-- You can style a navigation list, too -->
<nav class="nav links-dark bg-light">
  <a class="nav-link" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
</nav>

Dealing with specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.