Bootstrap 4 Colors

Bootstrap 4 Colors

Bootstrap 4 consists of classes that are used to set colors according to the context of the element, and with the help of these classes, we can read the code easily. These classes are used for both text color and background-color.

Text Colors

Bootstrap 4 offers a number of classes that help to set the color of the text. There are many classes of text color, which are given below:-

• .text-muted
• .text-primary
• .text-success
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-body
• .text-light

Example

Output

We can also use these classes on links. The color of the link will become darker when we hover over the links.

Example

Output

Background Colors

Bootstrap also offers predefined classes to set background colors of any element, font, paragraph, etc. There are many classes of background color, which are given below:-

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark
• .bg-light

Note: Background colors do not change the color of the text. If you also want to set the color of the text, then you will have to use the .text-* class.

Example

Output