Background Color

new

Utilities for controlling the background color of an element.

Contents

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.

Class	Properties
.text-bg-primary	background-color: rgb(0, 82, 204)	.text-bg-primary
.text-bg-secondary	background-color: rgb(82, 67, 170)	.text-bg-secondary
.text-bg-success	background-color: rgb(0, 135, 90)	.text-bg-success
.text-bg-danger	background-color: rgb(222, 53, 11)	.text-bg-danger
.text-bg-warning	background-color: rgb(255, 171, 0)	.text-bg-warning
.text-bg-info	background-color: rgb(66, 82, 110)	.text-bg-info
.text-bg-light	background-color: rgb(250, 251, 252)	.text-bg-light
.text-bg-dark	background-color: rgb(9, 30, 66)	.text-bg-dark

Quick reference

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