Colors, Backgrounds and Borders

Consistent color is what makes a site look designed rather than assembled. Bootstrap ships a theme color system with eight named colors that flow through text, backgrounds, borders, buttons and every component. Learn the names once and you can recolor anything. This lesson covers text and background utilities, opacity modifiers, gradients, borders and rounded corners.

The Theme Color Palette

Bootstrap defines these theme colors:

primary (blue) for main actions and brand accents
secondary (gray) for less prominent elements
success (green) for positive states
danger (red) for errors and destructive actions
warning (yellow) for caution
info (cyan) for neutral highlights
light and dark for near-white and near-black surfaces

Every color-aware utility and component accepts these names, so btn-danger, text-danger, bg-danger and border-danger all share the same red.

Text Color Utilities

html

<p class="text-primary">Primary text</p>
<p class="text-danger">Error message</p>
<p class="text-muted">Muted helper text</p>
<p class="text-body-secondary">Secondary body text (Bootstrap 5.3)</p>

For guaranteed contrast on colored backgrounds, text-white and text-dark are available, and text-opacity-75, text-opacity-50 and text-opacity-25 fade text without changing its hue.

Background Utilities

Background classes follow the same names: bg-primary, bg-success, bg-light and so on, plus bg-body and bg-transparent. Pair a dark background with light text yourself; Bootstrap does not do it automatically:

html

<div class="bg-dark text-white p-3">Dark panel</div>
<div class="bg-warning text-dark p-3">Warning banner</div>
<div class="bg-primary bg-opacity-25 p-3">Soft primary tint</div>

The bg-opacity-* modifiers (75, 50, 25, 10) create subtle tinted panels from any theme color, which is a clean way to build alert-like sections without extra CSS. Adding bg-gradient overlays a slight top-down gradient on any background color.

Border Utilities

Borders are additive and subtractive. border adds a border on all sides; border-top, border-end, border-bottom, border-start target one side; border-0 or border-top-0 remove them:

html

<div class="border border-success p-3">Success outline</div>
<div class="border-bottom pb-2 mb-3">Underlined section header</div>

Control thickness with border-1 through border-5, and color with border-{theme} classes. Like text, borders support border-opacity-* modifiers.

Rounded Corners and Shadows

Radius utilities finish the look:

rounded applies the default radius; rounded-0 removes it.
rounded-1 to rounded-5 scale the radius up.
rounded-circle makes squares circular (perfect for avatars) and rounded-pill creates capsule shapes.
rounded-top, rounded-end and friends round only some corners.

Shadows add depth: shadow-sm, shadow and shadow-lg, with shadow-none to remove inherited shadows.

html

<img src="avatar.jpg" class="rounded-circle" width="64" height="64" alt="Avatar">
<div class="p-4 rounded-3 shadow-sm border">Card-like panel</div>

Accessibility Note

Never rely on color alone to convey meaning; pair red error text with an icon or explicit wording. Check contrast when combining tints like bg-opacity-25 with colored text so copy stays readable.

Key Takeaways

Eight theme color names drive text, background, border and component colors consistently.
Opacity modifiers create tints and fades without custom CSS.
Border utilities add, remove, resize and recolor borders per side.
rounded-*, rounded-circle, rounded-pill and shadow-* polish surfaces quickly.

Next lesson: Buttons and Button Groups, the most used component in the framework.