Colors

Colors play a large role in defining the look and feel of your design. That’s why we provide you with a larger color palette, giving you more freedom in how you bring your elements to life with colors.

Color palette

The color palette includes 12 colors by default, which can easily be extended and changed using the color map in the _variables.scss file.
All color variations for elements (like btn-primary, alert-danger) are generated from this palette. The following default colors are included:

primary
secondary
c1
c2
c3
c4
danger
warning
success
info
light
dark

These colors are available for many components, such as:

  • text: text-{color}
  • backgrounds: bg-{color}
  • buttons: btn-{color}
  • alerts: alert-{color}
  • borders: border-{color}
    and many more.