back to main Purchase

Text & Backgrounds

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
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-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
.bg-gradient-primary .bg-gradient-secondary .bg-gradient-success .bg-gradient-danger .bg-gradient-warning .bg-gradient-danger .bg-gradient-primary .bg-gradient-primary .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-primary
.bg-gradient-danger
.bg-gradient-danger
.bg-gradient-dark

Comparision using gradient fake

.bg-dark
.bg-gradnient
.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-dark-soft
Soft backgrounds.

Nice soft looking backgrounds.

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

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

Border width is set using utility classes: .border-1 .border-2 .border-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-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-dark-hover
.bg-primary-soft-hover .bg-secondary-soft-hover .bg-success-soft-hover .bg-danger-soft-hover .bg-warning-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