Backgrounds

Backgrounds

Set background colors with contacting foregrounds.

:choco-info: Reference Bootstrap

Choco-theme respects all Bootstrap Color & Background documentation.

Background Color with Contrasting Text

While independent bg-${color} classes can be used in conjunction with text-${color} classes, it is encouraged to use the combined text-bg-${color} class to ensure accessible text.

.text-bg-primary
.text-bg-secondary
.text-bg-success
.text-bg-danger
.text-bg-warning
.text-bg-info
.text-bg-pink
.text-bg-orange
.text-bg-purple
.text-bg-dark
.text-bg-light
.text-bg-body
.text-bg-body-secondary
.text-bg-body-contrast
.text-bg-body-tertiary

Best Practices

DON'T

Do not use two separate classes. This can cause accessibility issues.

<section class="bg-primary text-dark">
    <h1>Lorum Ipsum</h1>
    <p>Proin commodo, ligula sit.</p>
</section>
DO

Use the combined text-bg-${color} class to ensure accessibility.

<section class="text-bg-primary">
    <h1>Lorum Ipsum</h1>
    <p>Proin commodo, ligula sit.</p>
</section>