Skip to main content

Background

Background color classes can be used to set background color for an element.

The syntax for the class is as follows:

.bg-{$color}-{$base}

where $color is one of the following: gray, primary, secondary, success, warning and error

and $base is one of the following: 900, 800, 700, 600, 500, 400, 300, 200, 100

Base variants#

<div class="bg-primary-900 rounded-sm p-4">.bg-primary-900</div><div class="bg-primary-800 rounded-sm p-4">.bg-primary-800</div><div class="bg-primary-700 rounded-sm p-4">.bg-primary-700</div><div class="bg-primary-600 rounded-sm p-4">.bg-primary-600</div><div class="bg-primary-500 rounded-sm p-4">.bg-primary-500</div><div class="bg-primary-400 rounded-sm p-4">.bg-primary-400</div><div class="bg-primary-300 rounded-sm p-4">.bg-primary-300</div><div class="bg-primary-200 rounded-sm p-4">.bg-primary-200</div><div class="bg-primary-100 rounded-sm p-4">.bg-primary-100</div>
.bg-primary-900
.bg-primary-800
.bg-primary-700
.bg-primary-600
.bg-primary-500
.bg-primary-400
.bg-primary-300
.bg-primary-200
.bg-primary-100

note

You may have noticed some extra classes like .rounded-sm and .p-4 in the above code. We will learn about those classes in the following sections.

Color variants#

<div class="bg-primary-500 rounded-sm p-4">.bg-primary-500</div><div class="bg-secondary-500 rounded-sm p-4">.bg-secondary-500</div><div class="bg-success-500 rounded-sm p-4">.bg-success-500</div><div class="bg-warning-500 rounded-sm p-4">.bg-warning-500</div><div class="bg-error-500 rounded-sm p-4">.bg-error-500</div><div class="bg-gray-500 rounded-sm p-4">.bg-gray-500</div>
.bg-primary-500
.bg-secondary-500
.bg-success-500
.bg-warning-500
.bg-error-500
.bg-gray-500

SCSS#

If you are using the scss source files, you can use the mixins to get the colours. 

.para{    @mixin set-bg("primary", "500");    // other css rules}

The above code will output the following css:

.para{    background-color: var(--primary-500); /*#8247e5*/    /* other css rules */}
note

The set-bg mixin will return background-color property with a CSS3 var as its value. These varialbes can be overriden or changed by the users. More about this in the customize section.

All colors#

.bg-primary-900
.bg-primary-800
.bg-primary-700
.bg-primary-600
.bg-primary-500
.bg-primary-400
.bg-primary-300
.bg-primary-200
.bg-primary-100
.bg-secondary-900
.bg-secondary-800
.bg-secondary-700
.bg-secondary-600
.bg-secondary-500
.bg-secondary-400
.bg-secondary-300
.bg-secondary-200
.bg-secondary-100
.bg-success-900
.bg-success-800
.bg-success-700
.bg-success-600
.bg-success-500
.bg-success-400
.bg-success-300
.bg-success-200
.bg-success-100
.bg-warning-900
.bg-warning-800
.bg-warning-700
.bg-warning-600
.bg-warning-500
.bg-warning-400
.bg-warning-300
.bg-warning-200
.bg-warning-100
.bg-error-900
.bg-error-800
.bg-error-700
.bg-error-600
.bg-error-500
.bg-error-400
.bg-error-300
.bg-error-200
.bg-error-100
.bg-gray-900
.bg-gray-800
.bg-gray-700
.bg-gray-600
.bg-gray-500
.bg-gray-400
.bg-gray-300
.bg-gray-200
.bg-gray-100