A reference list for the custom functions and directives we use throughout the Sass files


You can lighten or darken colors with tint-color() and shade-color() functions. These functions will mix colors with black or white, unlike Sass' native lighten() and darken() functions which will change the lightness by a fixed amount, which often doesn’t lead to the desired effect.

Later, you can use these functions like this:

.custom-element {
    color: tint-color($primary, 10%);

.custom-element-2 {
    color: shade-color($danger, 30%);

Color contrast

An additional function we use is the color contrast function, color-contrast included in Bootstrap. It utilizes the WCAG 2.0 algorithm for calculating contrast thresholds based on relative luminance in a sRGB colorspace to automatically return a light (#fff), dark (#212529) or black (#000) contrast color based on the specified base color.

.custom-element {
    color: color-contrast(#000);

// returns `color: #fff`

You can also specify a base color with our color map functions:

.custom-element {
    color: color-contrast($dark); // returns `color: #fff`

Escape SVG

We use the escape-svg function to escape the <, > and # characters for SVG background images. When using the escape-svg function, data URIs must be quoted.

// Data URIs must be quoted.
$svg: url("data:image/svg+xml,<svg xmlns='' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");

// Using the function
UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->