Background Color

new
Utilities for controlling the background color of an element.

When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of level AA.

Color & background

The below background color with contrasting foreground color. See Bootstrap’s Color & background for more information.

ClassProperties
.text-bg-primarybackground-color: rgb(0, 82, 204).text-bg-primary
.text-bg-secondarybackground-color: rgb(82, 67, 170).text-bg-secondary
.text-bg-successbackground-color: rgb(0, 135, 90).text-bg-success
.text-bg-dangerbackground-color: rgb(222, 53, 11).text-bg-danger
.text-bg-warningbackground-color: rgb(255, 171, 0).text-bg-warning
.text-bg-infobackground-color: rgb(66, 82, 110).text-bg-info
.text-bg-lightbackground-color: rgb(250, 251, 252).text-bg-light
.text-bg-darkbackground-color: rgb(9, 30, 66).text-bg-dark

Quick reference

ClassProperties
.bg-blue-50background-color: rgb(222, 235, 255);
.bg-blue-75background-color: rgb(179, 212, 255);
.bg-blue-100background-color: rgb(76, 154, 255);
.bg-blue-200background-color: rgb(38, 132, 255);
.bg-blue-300background-color: rgb(0, 101, 255);
.bg-blue-400background-color: rgb(0, 82, 204);
.bg-blue-500background-color: rgb(7, 71, 166);
.bg-green-50background-color: rgb(227, 252, 239);
.bg-green-75background-color: rgb(171, 245, 209);
.bg-green-100background-color: rgb(121, 242, 192);
.bg-green-200background-color: rgb(87, 217, 163);
.bg-green-300background-color: rgb(54, 179, 126);
.bg-green-400background-color: rgb(0, 135, 90);
.bg-green-500background-color: rgb(0, 102, 68);
.bg-neutral-0background-color: rgb(255, 255, 255);
.bg-neutral-10background-color: rgb(250, 251, 252);
.bg-neutral-20background-color: rgb(244, 245, 247);
.bg-neutral-30background-color: rgb(235, 236, 240);
.bg-neutral-40background-color: rgb(223, 225, 230);
.bg-neutral-50background-color: rgb(193, 199, 208);
.bg-neutral-60background-color: rgb(179, 186, 197);
.bg-neutral-70background-color: rgb(165, 173, 186);
.bg-neutral-80background-color: rgb(151, 160, 175);
.bg-neutral-90background-color: rgb(137, 147, 164);
.bg-neutral-100background-color: rgb(122, 134, 154);
.bg-neutral-200background-color: rgb(107, 119, 140);
.bg-neutral-300background-color: rgb(94, 108, 132);
.bg-neutral-400background-color: rgb(80, 95, 121);
.bg-neutral-500background-color: rgb(66, 82, 110);
.bg-neutral-600background-color: rgb(52, 69, 99);
.bg-neutral-700background-color: rgb(37, 56, 88);
.bg-neutral-800background-color: rgb(23, 43, 77);
.bg-neutral-900background-color: rgb(9, 30, 66);
.bg-purple-50background-color: rgb(234, 230, 255);
.bg-purple-75background-color: rgb(192, 182, 242);
.bg-purple-100background-color: rgb(153, 141, 217);
.bg-purple-200background-color: rgb(135, 119, 217);
.bg-purple-300background-color: rgb(101, 84, 192);
.bg-purple-400background-color: rgb(82, 67, 170);
.bg-purple-500background-color: rgb(64, 50, 148);
.bg-red-50background-color: rgb(255, 235, 230);
.bg-red-75background-color: rgb(255, 189, 173);
.bg-red-100background-color: rgb(255, 143, 115);
.bg-red-200background-color: rgb(255, 116, 82);
.bg-red-300background-color: rgb(255, 86, 48);
.bg-red-400background-color: rgb(222, 53, 11);
.bg-red-500background-color: rgb(191, 38, 0);
.bg-teal-50background-color: rgb(230, 252, 255);
.bg-teal-75background-color: rgb(179, 245, 255);
.bg-teal-100background-color: rgb(121, 226, 242);
.bg-teal-200background-color: rgb(0, 199, 230);
.bg-teal-300background-color: rgb(0, 184, 217);
.bg-teal-400background-color: rgb(0, 163, 191);
.bg-teal-500background-color: rgb(0, 141, 166);
.bg-yellow-50background-color: rgb(255, 250, 230);
.bg-yellow-75background-color: rgb(255, 240, 179);
.bg-yellow-100background-color: rgb(255, 227, 128);
.bg-yellow-200background-color: rgb(255, 196, 0);
.bg-yellow-300background-color: rgb(255, 171, 0);
.bg-yellow-400background-color: rgb(255, 153, 31);
.bg-yellow-500background-color: rgb(255, 139, 0);

Basic usage

‚Äč

Setting the background color

Control the background color of an element using the bg-{color} utilities.

<button class="btn bg-teal-200 ...">
  Save changes
</button>