Answer»
Use a handful of colour utility classes to convey meaning through color.Supports styling links with hover states, too. Example:
| bg-primary | It is used to add a blue background. |
<div class="bg-primary text-white">text is white and background is blue</div> |
|---|
| bg-secondary | It is used to add a grey background. |
<div class="bg-secondary"> background is grey</div> |
|---|
| bg-success | It is used to add a green background. |
<div class="bg-success"> background is green</div> |
|---|
| bg-info | It is used to add a light blue background. |
<div class="bg-info"> background is light blue</div> |
|---|
| bg-warning | It is used to add a yellow background. |
<div class="bg-warning"> background is yellow</div> |
|---|
| bg-danger | It is used to add a red background. |
<div class="bg-danger"> background is red</div> |
|---|
| bg-light | It is used to add a light (white or light grey) background. |
<div class="bg-light"> background is white/light grey</div> |
|---|
| bg-dark | It is used to add a black (dark) background. |
<div class="bg-dark"> background is black</div> |
|---|
| bg-white | It is used to add a white background. |
<div class="bg-white"> background is white</div> |
|---|
| text-* | Specific colours for the text are used. There are different types of values: primary, secondary, info, success, danger, warning, white, light, dark. |
<p class="text-primary">Text color is blue</p>
<p class="text-success">Text color is green</p> |
|---|
|
