Text & Backgrounds

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

.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 .txt-white or .txt-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-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-fake
Gradient colors.
Same as bootstrap backgrounds, but using gradients for a slightly better look.

Note: .bg-gradient-fake require at least relative position on main container
.bg-gradient-primary
.bg-gradient-danger
.bg-gradient-danger
.bg-gradient-dark

Comparision raw vs fake

.bg-danger
.bg-gradnient-fake
.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-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-light-radial - recommended to use them both as a fallback, in case some browsers do not support radials. .bg-light-radial is helping with for little dirty backgrounds.

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