Bootstrap 4 Colors


Background Colors

In Bootstrap we use the bg-color class to change the background-color of a text. Some of these classes are named as .bg-primary, .bg-secondary, .bg-success, .bg-dark, .bg-warning, .bg-danger, .bg-light,.bg-info.

Example Code

.bg-primary

.bg-secondary

.bg-info

.bg-success

.bg-warning

.bg-danger

.bg-light

.bg-dark


Text Colors

In Bootstrap we use the text-color class to change the color of a text. Some of these classes are named as .text-muted,.text-primary,.text-secondary,.text-info,.text-success,.text-warning,.text-danger,.text-dark,.text-light,.text-body.

Example Code

This is .text-muted class.

This is .text-primary class.

This is .text-secondary class.

This is .text-info class.

This is .text-success class.

This is .text-warning class.

This is .text-danger class.

This is .text-dark class.

This is .text-light class.

This is .text-body class.


Text Color with link

In Bootstrap we use the text-color class to change the color of a link. When the mouse hover over the link, it's color will change.

Example Code


Text Color with opacity

In Bootstrap we use the .text-black-50 and .text-white-50 change the opacity of the text.

Example Code

This is .text-black-50 class.

This is .text-white-50 class.