Bootstrap Colors Palette

Color palette using for default theme in css bootstrap framework.

Default Bootstrap color scheme v4.6.x

Main Theme Colors

PrimaryPrimary UI color, using for accent elements. Color variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-primary, .bg-primary, .badge-primary, .btn-primary, .btn-link, .btn-outline-primary, .border-primary
Primary InteractiveAdditional Primary color used for interactive variant(hover, mouse-in, click) for accent elements. Color variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .btn-primary, .btn-link, .btn-outline-primary
Secondary, MutedThe gray shade that uses in two ways: as a secondary variant for button, badge, text, link, border, progress bar and spinner. A muted variant of a base text.
CSS classes: .text-secondary, .bg-secondary, .badge-secondary, .btn-secondary, .btn-outline-secondary, .text-muted, .border-secondary
Secondary InteractiveInteractive variant(hover, mouse-in, click) for secondary buttons and links.
CSS classes: .btn-secondary, .btn-outline-secondary
SuccessRepresent successful state for user interactions with form inputs. Color variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-success, .bg-success, .badge-success, .btn-success, .btn-outline-success, .border-success
Success InteractiveInteractive color for success variant ui components. Trigger on mouse events for success colored buttons or links.
CSS classes: .btn-success, .btn-outline-success
DangerRepresent error state for user interactions with form inputs. Color variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-danger, .bg-danger, .badge-danger, .btn-danger, .btn-outline-danger, .border-danger
Danger InteractiveInteractive shade for danger colored buttons and links. Color triggered on user mouse events.
CSS classes: .btn-danger, .btn-outline-danger
WarningColor variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-warning, .bg-warning, .badge-warning, .btn-warning, .btn-outline-warning, .border-warning
Warning InteractiveInteractive color for warning variant ui components. Trigger on mouse events for warning colored buttons or links.
CSS classes: .btn-warning, .btn-outline-warning
InfoColor variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-info, .bg-info, .badge-info, .btn-info, .btn-outline-info, .border-info
Info InteractiveInteractive shade for info colored buttons and links. Color triggered on user mouse events.
CSS classes:.btn-info, .btn-outline-info
LightColor variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-light, .bg-light, .badge-light, .btn-light, .btn-outline-light, .border-light
Light InteractiveAdditional Light color used for interactive variant(hover, mouse-in, click) for light colored links and buttons.
CSS classes: .btn-light, .btn-outline-light
DarkColor variant for button, badge, text, link, border, progress bar and spinner.
CSS classes: .text-dark, .bg-dark, .badge-dark, .btn-dark, .btn-outline-dark, .border-dark
Dark InteractiveInteractive color variant for buttons and links. Color activates on user events(hover, mouse-in, click).
CSS classes: .btn-dark, .btn-outline-dark
WhitePlain white color to reset background, or set change text or border color to white.
CSS classes: .text-white, .bg-white, .border-white
Text BodyDefault text color.
CSS classes: .text-body