Bootstrap 4 Text Colors

Bootstrap 4 has some contextual classes for colors that can be used on text.

<div class="container">
   <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">This text represents secondary.</p>
   <p class="text-white">This text represents white.</p>
   <p class="text-dark">This text represents dark.</p>
   <p class="text-light">This text represents light.</p>
</div> 

Contextual text color classes can also be used on links, which will add a darker hover color:

   Muted link class="text-muted".
   Primary link class="text-primary".
   Success link class="text-success".
   Info link class="text-info".
   Warning link class="text-warning".
   Danger link class="text-danger".
   Secondary link class="text-secondary".
   Dark grey link class="text-dark".
   Light grey link class="text-light".

Bootstrap 4 classes for background color are:

<div class="container">
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
  <p class="bg-secondary">This text represents secondary.</p>
  <p class="bg-dark">This text represents dark.</p>
  <p class="bg-light">This text represents light.</p>
</div>