Background

Convey meaning through background-color and add decoration with gradients.

Class name	Preview
`.text-bg-primary`	Primary with contrasting color
`.text-bg-secondary`	Secondary with contrasting color
`.text-bg-success`	Success with contrasting color
`.text-bg-info`	Info with contrasting color
`.text-bg-warning`	Warning with contrasting color
`.text-bg-danger`	Danger with contrasting color
`.text-bg-light`	Light with contrasting color
`.text-bg-dark`	Dark with contrasting color

Class name	Preview
`.bg-primary` `.bg-primary-subtle`	Primary Primary Subtle
`.bg-secondary` `.bg-secondary-subtle`	Secondary Secondary Subtle
`.bg-success` `.bg-success-subtle`	Success Success Subtle
`.bg-info` `.bg-info-subtle`	Info Info Subtle
`.bg-warning` `.bg-warning-subtle`	Warning Warning Subtle
`.bg-danger` `.bg-danger-subtle`	Danger Danger Subtle
`.bg-light` `.bg-light-subtle`	Light Light Subtle
`.bg-dark` `.bg-dark-subtle`	Dark Dark Subtle
`.bg-body` `.bg-body-secondary` `.bg-body-tertiary`	Body Body Secondary Body Tertiary
`.bg-white`	White
`.bg-black`	Black
`.bg-transparent`	Transparent

Class name	Preview
`.bg-primary.bg-gradient`	Primary with contrasting color
`.bg-secondary.bg-gradient`	Secondary with contrasting color
`.bg-success.bg-gradient`	Success with contrasting color
`.bg-info.bg-gradient`	Info with contrasting color
`.bg-warning.bg-gradient`	Warning with contrasting color
`.bg-danger.bg-gradient`	Danger with contrasting color
`.bg-light.bg-gradient`	Light with contrasting color
`.bg-dark.bg-gradient`	Dark with contrasting color
`.bg-black.bg-gradient`	Black with contrasting color

Preview

This is default primary background

This is 75% opacity primary background

This is 50% opacity primary background

This is 25% opacity primary background

This is 10% opacity primary background

Avalable Classes

The classes are named using the format {color}-{darkness level}. Here are some representative examples of these classes:

.bg-blue-300 .bg-indigo-700 .bg-green-900

This can also be combined with the background opacity class.

.bg-blue-300.bg-opacity-50 .bg-indigo-700.bg-opacity-30 .bg-green-900.bg-opacity-70

Blue	Indigo	Purple	Red	Orange	Yellow	Green	Teal	Cyan
100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900	100 200 300 400 500 600 700 800 900