Colors
From Bootstrap - Demo Wiki
Websites using Bootstrap can be styled with a set of predefined color classes for background, border and text color. The classes can be applied using the generic bg-
, bg-gradient-
, border-
and text-
prefixes, to specific component prefixes such as alert-
and passed as parameter values to BootstrapComponents extension elements. Note that a color style may use different hex color codes if they're applied using generic or specific classes. See the examples below for more information.
Colors
Name | Description | Prefixes | Extension Components |
---|---|---|---|
Black-50 | Black color with 50% transparency used on text. | text- |
|
Danger | A red color used mainly as background. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Dark | A gray color used as background and text. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Info | A gray color used as background and text. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Light | A light gray color used as background and text. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Muted | A light gray color used usually applied to text of minor relevance. | text- |
|
Primary | A light blue color used mainly as primary background. | alert- badge- bg- text- |
Button, Alert, Badge, Card, Modal, Popover |
Secondary | A grey color used mainly as background. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Success | A light green color used mainly as background. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
Transparent | A transparent background that will take on the color of its container. | bg- |
|
Warning | A yellow color used as background or text over dark background. | alert- badge- bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
White | White can be used as background and as text color on top of dark backgrounds. | bg- text- |
Alert, Badge, Button, Card, Modal, Popover |
White-50 | White color with 50% transparency used on text. | text- |