Fill

The .fill class adds a background color to an element.

By default, it applies a light gray background. It can be paired with the .primary, .secondary, .success, .danger, and .warning classes to change the color, and the .vivid class to use a more vibrant shade.

Default

.fill

.fill .primary

.fill .secondary

.fill .success

.fill .danger

.fill .warning

Vivid

.fill .vivid

.fill .primary .vivid

.fill .secondary .vivid

.fill .success .vivid

.fill .danger .vivid

.fill .warning .vivid

<div class="fill">.fill</div>
<div class="fill primary">.fill .primary</div>
<div class="fill secondary">.fill .secondary</div>
<div class="fill success">.fill .success</div>
<div class="fill danger">.fill .danger</div>
<div class="fill warning">.fill .warning</div>

<div class="fill vivid">.fill .vivid</div>
<div class="fill primary vivid">.fill .primary .vivid</div>
<div class="fill secondary vivid">.fill .secondary .vivid</div>
<div class="fill success vivid">.fill .success .vivid</div>
<div class="fill danger vivid">.fill .danger .vivid</div>
<div class="fill warning vivid">.fill .warning .vivid</div>