Bootstrap4 Colors
Bootstrap 4 provides some representative color classes:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark and .text-light:
Example
<div class="container">
<h2>Text colors with specified meanings</h2>
<p class="text-muted">Muted text.</p>
<p class="text-primary">Important text.</p>
<p class="text-success">Successful text.</p>
<p class="text-info">Text representing some informational messages.</p>
<p class="text-warning">Warning text.</p>
<p class="text-danger">Danger text.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">Dark gray text.</p>
<p class="text-light">Light gray text (hard to see on white background).</p>
<p class="text-white">White text (hard to see on white background).</p>
</div>
Try it Yourself »
Using in links
Example
<div class="container">
<h2>Text colors</h2>
<p>Move the mouse over the link.</p>
<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>
<a href="#" class="text-secondary">Secondary link.</a>
<a href="#" class="text-dark">Dark gray link.</a>
<a href="#" class="text-light">Light gray link.</a>
</div>
Try it Yourself »
Background Colors
The classes that provide background colors are:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand.bg-light。
Note that the background color does not set the text color; in some examples you need to use it with the.text-*class.
Example
<div class="container">
<h2>Background colors</h2>
<p class="bg-primary text-white">Important background color.</p>
<p class="bg-success text-white">Successful background color.</p>
<p class="bg-info text-white">Info prompt background color.</p>
<p class="bg-warning text-white">Warning background color.</p>
<p class="bg-danger text-white">Danger background color.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark gray background color.</p>
<p class="bg-light text-dark">Light gray background color.</p>
</div>
Try it Yourself »