Bootstrap 4
Bootstrap 4 Colors
The bootstrap 4 colors are mainly three ( Text Colors, Link Colors, Background Colors). The color classes are : .text-primary, .text-success, .text-info, .text-warning, .text-danger.text-light ,  .text-dark,  .text-white ,  .text-secondary  and .text-muted   :
<p class="text-primary">Free Time Learning (.text-primary)</p>
<p class="text-success">Free Time Learning (.text-success)</p>
<p class="text-info">Free Time Learning (.text-info)</p>
<p class="text-warning">Free Time Learning (.text-warning)</p>
<p class="text-danger">Free Time Learning (.text-danger)</p>
<p class="text-light">Free Time Learning (.text-light)</p>
<p class="text-dark">Free Time Learning (.text-dark)</p>
<p class="text-white">Free Time Learning (.text-white)</p>
<p class="text-secondary">Free Time Learning (.text-secondary)</p>
<p class="text-muted">Free Time Learning (.text-muted)</p>
Output :
Text Links

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

Note: .text-white and .text-muted class has no link styling.

<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-primary">www.freetimelearning.com (.text-primary)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-success">www.freetimelearning.com (.text-success)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-info">www.freetimelearning.com (.text-info)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-warning">www.freetimelearning.com  (.text-warning)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-danger">www.freetimelearning.com (.text-danger)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-light">www.freetimelearning.com (.text-light)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-dark">www.freetimelearning.com (.text-dark)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-white">www.freetimelearning.com (.text-white)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-secondary">www.freetimelearning.com (.text-secondary)</a></p>
<p><a href="http://www.freetimelearning.com/" target="_blank" class="text-muted">www.freetimelearning.com (.text-muted)</a></p>
Output :
Background Colors

The Bootstrap 4 background colors are : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger.bg-light.bg-dark.bg-white ,  .bg-secondary  and .bg-muted   :

<p class="p-3 mb-2 bg-primary text-white">Free Time Learning (.text-primary)</p>
<p class="p-3 mb-2 bg-success text-white">Free Time Learning (.text-success)</p>
<p class="p-3 mb-2 bg-info text-white">Free Time Learning (.text-info)</p>
<p class="p-3 mb-2 bg-warning text-white">Free Time Learning (.text-warning)</p>
<p class="p-3 mb-2 bg-danger text-white">Free Time Learning (.text-danger)</p>
<p class="p-3 mb-2 bg-light text-dark">Free Time Learning (.text-light)</p>
<p class="p-3 mb-2 bg-dark text-white">Free Time Learning (.text-dark)</p>
<p class="p-3 mb-2 bg-white text-dark">Free Time Learning (.text-white)</p>
<p class="p-3 mb-2 bg-secondary text-white">Free Time Learning (.text-secondary)</p>
<p class="p-3 mb-2 bg-muted text-dark">Free Time Learning (.text-muted)</p>
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.