Background Borders Display Flex Float Interactions Link Object fit Others Position Sizing Spacing Text Thumbnail Visibility z-index

Background color (colors_background_color)

Primary (bg-primary)

Primary subtle (bg-primary-subtle)

Secondary (bg-secondary)

Secondary subtle (bg-secondary-subtle)

Success (bg-success)

Success subtle (bg-success-subtle)

Danger (bg-danger)

Danger subtle (bg-danger-subtle)

Warning (bg-warning)

Warning subtle (bg-warning-subtle)

Info (bg-info)

Info subtle (bg-info-subtle)

Light (bg-light)

Light subtle (bg-light-subtle)

Dark (bg-dark)

Dark subtle (bg-dark-subtle)

Body secondary (bg-body-secondary)

Body tertiary (bg-body-tertiary)

Body (bg-body)

White (bg-white)

Black (bg-black)

Transparent (bg-transparent)

Primary with contrasting foreground (text-bg-primary)

Secondary with contrasting foreground (text-bg-secondary)

Success with contrasting foreground (text-bg-success)

Danger with contrasting foreground (text-bg-danger)

Warning with contrasting foreground (text-bg-warning)

Info with contrasting foreground (text-bg-info)

Light with contrasting foreground (text-bg-light)

Dark with contrasting foreground (text-bg-dark)

Body with contrasting foreground (text-bg-body)

White with contrasting foreground (text-bg-white)

Transparent with contrasting foreground (text-bg-transparent)
<p class="bg-primary border p-2">Primary (bg-primary)</p> <p class="bg-primary-subtle border p-2">Primary subtle (bg-primary-subtle)</p> <p class="bg-secondary border p-2">Secondary (bg-secondary)</p> <p class="bg-secondary-subtle border p-2">Secondary subtle (bg-secondary-subtle)</p> <p class="bg-success border p-2">Success (bg-success)</p> <p class="bg-success-subtle border p-2">Success subtle (bg-success-subtle)</p> <p class="bg-danger border p-2">Danger (bg-danger)</p> <p class="bg-danger-subtle border p-2">Danger subtle (bg-danger-subtle)</p> <p class="bg-warning border p-2">Warning (bg-warning)</p> <p class="bg-warning-subtle border p-2">Warning subtle (bg-warning-subtle)</p> <p class="bg-info border p-2">Info (bg-info)</p> <p class="bg-info-subtle border p-2">Info subtle (bg-info-subtle)</p> <p class="bg-light border p-2">Light (bg-light)</p> <p class="bg-light-subtle border p-2">Light subtle (bg-light-subtle)</p> <p class="bg-dark border p-2">Dark (bg-dark)</p> <p class="bg-dark-subtle border p-2">Dark subtle (bg-dark-subtle)</p> <p class="bg-body-secondary border p-2">Body secondary (bg-body-secondary)</p> <p class="bg-body-tertiary border p-2">Body tertiary (bg-body-tertiary)</p> <p class="bg-body border p-2">Body (bg-body)</p> <p class="bg-white border p-2">White (bg-white)</p> <p class="bg-black border p-2">Black (bg-black)</p> <p class="bg-transparent border p-2">Transparent (bg-transparent)</p> <p class="text-bg-primary border p-2">Primary with contrasting foreground (text-bg-primary)</p> <p class="text-bg-secondary border p-2">Secondary with contrasting foreground (text-bg-secondary)</p> <p class="text-bg-success border p-2">Success with contrasting foreground (text-bg-success)</p> <p class="text-bg-danger border p-2">Danger with contrasting foreground (text-bg-danger)</p> <p class="text-bg-warning border p-2">Warning with contrasting foreground (text-bg-warning)</p> <p class="text-bg-info border p-2">Info with contrasting foreground (text-bg-info)</p> <p class="text-bg-light border p-2">Light with contrasting foreground (text-bg-light)</p> <p class="text-bg-dark border p-2">Dark with contrasting foreground (text-bg-dark)</p> <p class="text-bg-body border p-2">Body with contrasting foreground (text-bg-body)</p> <p class="text-bg-white border p-2">White with contrasting foreground (text-bg-white)</p> <p class="text-bg-transparent border p-2">Transparent with contrasting foreground (text-bg-transparent)</p>