Colour

Rocket CSS comes with many useful colour utility classes, use them to quickly add colour to your applications.

Basics#

Rocket CSS comes with a range of useful colour classes. The colour can be changed using our SCSS variables if required.

Text Colour#

Utilise one of our text colour classes:

  • - .text-primary to set primary text colour.
  • - .text-secondary to set secondary text colour.
  • - .text-success to set success text colour.
  • - .text-warning to set warning text colour.
  • - .text-danger to set danger text colour.
  • - .text-info to set info text colour.
  • - .text-dark to set dark text colour.
  • - .text-light to set light text colour.
  • - .text-black to set black text colour.
  • - .text-white to set white text colour.

.text-primary

.text-secondary

.text-success

.text-warning

.text-danger

.text-info

.text-dark

.text-light

.text-black

.text-white

Background Colour#

Utilise one of our background colour classes:

  • - .bg-primary to set primary background colour.
  • - .bg-secondary to set secondary background colour.
  • - .bg-success to set success background colour.
  • - .bg-warning to set warning background colour.
  • - .bg-danger to set danger background colour.
  • - .bg-info to set info background colour.
  • - .bg-dark to set dark background colour.
  • - .bg-light to set light background colour.
  • - .bg-black to set black background colour.
  • - .bg-white to set white background colour.

.bg-primary

.bg-secondary

.bg-success

.bg-warning

.bg-danger

.bg-info

.bg-dark

.bg-light

.bg-black

.bg-white