Utilities

File: src/scss/_core/utils/_background.scss

Text Color

Class Description Quick Example
.text-dark .text-white .text-muted
.text-primary .text-secondary .text-success .text-danger .text-warning .text-pink .text-indigo .text-purple
.text-*-soft
.link-muted .text-*-hover
.text-danger-gradient
Basic text colors.
Change text color when needed.

.text-*-hover Change link color on hover.
Examples:
.text-danger-hover
.text-success-hover
.text-danger-hover

Smarty

28+ SOW Plugins

.text-danger-gradient

.text-primary

.text-danger

.text-success

.text-warning

.text-indigo

.text-primary-soft

.text-danger-soft

.text-success-soft

.text-warning-soft

.text-indigo-soft

.link-muted

Background Color

Class Description Quick Example
.bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-pink .bg-indigo .bg-purple .bg-dark
.bg-gray-100 .bg-gray-200 .bg-gray-300 .bg-gray-400 .bg-gray-500 .bg-gray-600 .bg-gray-700 .bg-gray-800 .bg-gray-900
.bg-diff .bg-inherit
Bootstrap default background colors.
Mix with .text-white or .text-dark where a text contrast is needed.

You can mix with almost any utility class, like rounded: .rounded .rounded-xl, .row-pill etc.
.bg-primary
.bg-danger
.bg-danger
.bg-dark
.bg-gray-100
.bg-warning
.bg-diff (as differentiator)
.bg-gradient-fake
.bg-gradient-primary .bg-gradient-secondary .bg-gradient-success .bg-gradient-danger .bg-gradient-warning .bg-gradient-pink .bg-gradient-indigo .bg-gradient-purple .bg-gradient-dark .bg-gradient-light
.bg-gradient-radial-primary .bg-gradient-radial-secondary .bg-gradient-radial-success .bg-gradient-radial-danger .bg-gradient-radial-warning .bg-gradient-radial-pink .bg-gradient-radial-indigo .bg-gradient-radial-purple .bg-gradient-radial-dark .bg-gradient-radial-light
.bg-gradient-linear-default .bg-gradient-linear-primary .bg-gradient-linear-success .bg-gradient-linear-danger .bg-gradient-linear-indigo .bg-gradient-linear-purple
Gradient colors.
Same as bootstrap backgrounds, but using gradients for a slightly better look.

.bg-gradient-fake require relative position (or .position-relative class)
.bg-gradient-primary
.bg-gradient-danger
.bg-gradient-danger
.bg-gradient-dark

Comparision using gradient fake

.bg-dark
.bg-gradnient-fake
.bg-gradient-radial-danger
.bg-gradient-radial-warning
.bg-gradient-radial-success
.bg-gradient-linear-default
.bg-gradient-linear-purple
.bg-gradient-linear-success
.bg-primary-soft .bg-secondary-soft .bg-success-soft .bg-danger-soft .bg-warning-soft .bg-pink-soft .bg-indigo-soft .bg-purple-soft .bg-dark-soft
Soft backgrounds.

Nice soft looking backgrounds.

Looks good to also mix with borders:
.border-top .border-primary .bw--2.

Mixing multiple borders: .border-left .border-right
For all borders: .border (without -left, -right, etc).

Border width is set using utility classes: .bw--1 .bw--2 .bw--3

.bg-primary-soft
.bg-danger-soft
.bg-danger-soft
.bg-dark-soft
.bg-primary-light .bg-secondary-light .bg-success-light .bg-danger-light .bg-warning-light .bg-pink-light .bg-indigo-light .bg-purple-light .bg-dark-light
Light backgrounds.
Similiar to soft backgrounds, best for section backgrounds.
.bg-primary-light
.bg-danger-light
.bg-danger-light
.bg-dark-light
.bg-primary-hover .bg-secondary-hover .bg-success-hover .bg-danger-hover .bg-warning-hover .bg-pink-hover .bg-indigo-hover .bg-purple-hover .bg-dark-hover
.bg-primary-soft-hover .bg-secondary-soft-hover .bg-success-soft-hover .bg-danger-soft-hover .bg-warning-soft-hover .bg-pink-soft-hover .bg-indigo-soft-hover .bg-purple-soft-hover .bg-dark-soft-hover
Background color on hover.

Best mixed with .transition-bg-ease-[150|200|250|500]

In adition, .text-white-hover and .text-dark-hover are also available!

.bg-warning-hover .transition-bg-ease-150
.bg-danger-hover .transition-bg-ease-150
.bg-warning-soft-hover .transition-bg-ease-150
.bg-danger-soft-hover .transition-bg-ease-150

Smarty Various

Class Description Quick Example
.bg-cover

Set an image as a cover to any block element.

<div class="bg-cover" style="background-image:url('image.jpg')"></div>

You can mix it with overlay for a nice contrast by adding:
.overlay-[dark|light] .overlay-opacity-[0-9]

When using .rounded classes, add also .overflow-hidden class, as you see in the example.

with overlay
no overlay
.bg-blur

Blur background image - usually used with .bg-cover.

Because the blur effect is applied to the entire container, when blur effect is needed, add a dedicated div with .absolute-full class (else, the content is also blured). The parent container (main container) should have .position-relative to avoid exapanding outside.

blur background
.bg-suprime

Suprime/remove white image background. Applied directly to image.

Great way to improve existing ecommerce images giving that "luxury" look. Because is pure CSS, works for white image background only, at this time! Also, IE ignore this.

Container backgrounds: .bg-light .bg-gradient-radial-light/code> - recommended to use them both as a fallback, in case some browsers do not support radials. .bg-gradient-radial-light is helping with for little dirty backgrounds.

No .bg-suprime
...
With .bg-suprime
...
Image credit: https://unsplash.com/@honeyyanibel 		<div class="bg-light bg-gradient-radial-light p-3 text-center"> <img class="img-fluid bg-suprime" src="../demo.files/images/unsplash/honey-yanibel-minaya-cruz-pOVdqtwVjPM-unsplash.jpg" alt="..."> </div>
Jump To