Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.


Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

  • Gray-Darker
  • Gray-Dark
  • Gray
  • Gray-Light
  • Gray-Lighter

Default Colors

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

  • Brand-Primary
  • Brand-Success
  • Brand-Info
  • Brand-Warning
  • Brand-Danger

Custom Colors

Different colors used especially in charts, graphs and custom configurations for different buttons, panels, or sliders.

  • Custom-Red
  • Custom-Pink
  • Custom-Tapestry
  • Custom-Orange
  • Custom-Fire
  • Custom-Grape
  • Custom-Green
  • Custom-Fern
  • Custom-Pelerous
  • Custom-Astral
  • Custom-Stone
  • Custom-Gray