Background & Color

All content elements in T3Bootstrap v14 have global fields for background and color scheme. This demo shows the available variations of bg_color_class, color_scheme, background_media and bg_container.

Bootstrap Theme Colors

.bg-primary

Brand Colors — Buttons, Links, Brand Accents

.bg-secondary

Secondary color — neutral accents

.bg-success

Confirmation — Success, Completion, OK Messages

.bg-info

Information — Neutral Notes

.bg-warning

Attention — Caution: Questionable Actions

.bg-danger

Danger — Errors, Destructive Actions

.bg-light

Light version — subtle background

.bg-dark

Dark version — strong contrast

Extended Color Palette (Bootstrap)

.bg-blue

Deep Blue

.bg-indigo

Deep Indigo

.bg-purple

Purple

.bg-pink

Pink

.bg-red

Red

.bg-orange

Orange

.bg-yellow

Yellow

.bg-green

Green

.bg-teal

Teal

.bg-cyan

Cyan

.bg-gray

Gray

Custom Colors (T3Bootstrap)

.bg-lightgray

Light gray for a soft section background

.bg-lightblue

Light blue for information sections

.bg-dark-gray

Dark gray for a bold contrast

Background Media

background_media

Tech-inspired background with a subtle pattern

background_media

Code Editor — Dark Background for Light Text

background_media

Workspace photo with soft bokeh

bg_container — Container vs. Full-Width

Container Mode (bg_container = 0)

The background remains within the .container-max-width. This is the default behavior.

Full-Width Mode (bg_container = 1)

The background extends to the edge of the viewport — full-bleed section.