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.


Best Practices


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>

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>