How to color the background and text Bootstrap

Overview

Bootstrap is a popular framework that can help build responsive mobile-first sites using Bootstrap CDN and the templar starter page. Bootstrap has its own way of adding color styling to HTML groups or elements. This makes it look good without adding internal or external CSS. We look at various colors in this shot and apply them to our HTML code.

Custom colors in Bootstrap

Bootstrap has a total of nine custom colors:

1. primary
2. secondary
3. muted
4. white
5. warning
6. danger
7. info
8. light
9. dark

Applying the colors

We can apply these colors to text, backgrounds, and HTML elements. We will see how to color our background and text in this shot. To change the color of a text, we add the class text-colorname:

Example

Code explanation

Line 14: Notice how we add text-secondary which gives the text an ash color and the bg-success class that gives the background a green color. To add the text color, we add text-secondary directly to the <p> holding the text.