Color Utilities

Bootstrap's default utility classes can be found on the official Bootstrap Documentation page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.

Grayscale

Grayscale colors are also available, but only a subset are used to generate any utilities.

Text

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

Background

.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900

Background

Similar to the contextual text color classes, set the background of an element to any contextual class.

.bg-primary
.bg-secondary
.bg-red
.bg-green
.bg-blue
.bg-yellow
.bg-white
.bg-black
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-red
.bg-gradient-green
.bg-gradient-blue
.bg-gradient-yellow
.bg-gradient-white
.bg-gradient-black
.bg-primary-lighten
.bg-secondary-lighten
.bg-red-lighten
.bg-green-lighten
.bg-blue-lighten
.bg-yellow-lighten
.bg-white-lighten
.bg-black-lighten