Bootstrap Colors

Bootstrap has a set of theme colors which are used for buttons, alerts, badges and utilities. They are: primary, secondary, success, danger, warning, info, light and dark. You can use them with simple classes on any element.

Text colors

<p class="text-primary mb-1">.text-primary</p>
<p class="text-secondary mb-1">.text-secondary</p>
<p class="text-success mb-1">.text-success</p>
<p class="text-danger mb-1">.text-danger</p>
<p class="text-warning-emphasis mb-1">.text-warning-emphasis</p>
<p class="text-info-emphasis mb-1">.text-info-emphasis</p>
<p class="text-body-secondary mb-0">.text-body-secondary</p>

Background colors

<div class="p-2 mb-1 bg-primary text-white">.bg-primary</div>
<div class="p-2 mb-1 bg-success text-white">.bg-success</div>
<div class="p-2 mb-1 bg-danger text-white">.bg-danger</div>
<div class="p-2 mb-1 bg-warning text-dark">.bg-warning</div>
<div class="p-2 mb-1 bg-dark text-white">.bg-dark</div>
<div class="p-2 mb-0 bg-light text-dark">.bg-light</div>

text-bg-*: color and contrast in one class

With .text-bg-primary (and the other colors), Bootstrap sets the background and a text color with a good contrast. Use it instead of writing two classes.

<div class="p-2 mb-1 text-bg-primary">.text-bg-primary</div>
<div class="p-2 mb-1 text-bg-warning">.text-bg-warning</div>
<div class="p-2 mb-0 text-bg-dark">.text-bg-dark</div>

Subtle backgrounds and borders (Bootstrap 5.3)

<div class="p-2 mb-1 bg-primary-subtle text-primary-emphasis border border-primary-subtle rounded">Primary subtle</div>
<div class="p-2 mb-1 bg-success-subtle text-success-emphasis border border-success-subtle rounded">Success subtle</div>
<div class="p-2 mb-0 bg-danger-subtle text-danger-emphasis border border-danger-subtle rounded">Danger subtle</div>

The “subtle” and “emphasis” colors change by themselves in dark mode, so they are the best choice for a design which supports both modes. See Color Modes.

Opacity

<div class="p-2 mb-1 bg-primary bg-opacity-75 text-white">bg-opacity-75</div>
<div class="p-2 mb-1 bg-primary bg-opacity-50 text-white">bg-opacity-50</div>
<div class="p-2 mb-0 bg-primary bg-opacity-25">bg-opacity-25</div>

Body background and borders

• .bg-body, .bg-body-secondary, .bg-body-tertiary follow the page background and color mode.
• .border-primary, .border-danger change the border color.
• .bg-gradient adds a soft gradient over a background color.

Link colors

<p><a href="#" class="link-primary">Primary link</a> | <a href="#" class="link-danger">Danger link</a> | <a href="#" class="link-secondary link-underline-opacity-25">Secondary, soft underline</a></p>

Use colors with meaning

Color	Usual meaning
Primary	Main action or main brand color
Secondary	Less important action
Success	Done, correct, positive
Danger	Error, delete, warning of a risk
Warning	Careful, something needs attention
Info	Neutral information

Never use only the color to give a meaning. Add text or an icon too, because some people cannot see the difference between colors.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.