Colors

By using utility classes you can change the color of the text. It can also be used to links and will darken on hover just like our default link styles.

Syntax:

Muted Class:

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>   

Primary Class:

<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>   

Success:

<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>  

Info:

<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>  

Warning:

<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> 

Danger:

<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>  

White:

<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>  

Contextual text classes can also be used with anchors tags with the provided hover and focus states.

Note: The .text-white class has no link styling.

Example:

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

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

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

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

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

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