Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Theme colors

Primary theme colors are used for elements that must reflect the brand’s identity. Each color has a darker and a lighter shade. These can be customized to represent your brand identity using Sass and our build tools.

Gradient

We love gradients. That is why we created these variations that are built dynamically based on the theme’s colors described above. By changing a theme color the gradient will adapt.

Translucent

If you want add a little transparency to your backgrounds you can use the .bg-translucent-* modifier class. The opacity level can be modified from the variables file.

Text colors

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Gray colors

Grey colors are used for text, backgrounds, lines and borders. The grays from 100 to 300 are used for backgrounds, while the ones from 400 to 600 are used for icons.

Brand colors