Get support Purchase Now Preview Demo

Utilities, helpers

Our utilities are now generated by Utility API.

Bootstrap Utility API documentation share-external-link-1

How to use

The utility API is a Sass-based tool to generate utility classes. Learn more about it.

Additional utilities

We extended and modified the default Utility API to make the development process even easier.

  • We made position, min-viewport-height, width, max-width, height, max-height and min-height properties responsive.
  • We added more values to min-viewport-height.
  • We created tons of custom size values for width, max-width, height, max-height and min-height.
  • We added some scroll-margin properties.
  • z-index property is also available now with a few handy extra values.
  • We modified the opacity property for better availability.
  • We created some background related utilities like background-size, background-repeat and background-position.
$utilities: (
    "position": (
        property: position,
        responsive: true,
        values: static relative absolute fixed sticky
    ),
    "viewport-width": (
        responsive: true,
        property: width,
        class: vw,
        values: (
            25: 25vw,
            50: 50vw,
            75: 75vw,
            100: 100vw,
            auto: auto
        )
    ),
    "min-viewport-width": (
        responsive: true,
        property: min-width,
        class: min-vw,
        values: (
            25: 25vw,
            50: 50vw,
            75: 75vw,
            100: 100vw,
            auto: auto
        )
    ),
    "viewport-height": (
        responsive: true,
        property: height,
        class: vh,
        values: (
            25: 25vh,
            50: 50vh,
            75: 75vh,
            100: 100vh,
            auto: auto
        )
    ),
    "min-viewport-height": (
        responsive: true,
        property: min-height,
        class: min-vh,
        values: (
            25: 25vh,
            50: 50vh,
            75: 75vh,
            100: 100vh,
            auto: auto
        )
    ),
    "width": (
        responsive: true,
        property: width,
        class: w,
        values: $custom-sizes
    ),
    "max-width": (
        responsive: true,
        property: max-width,
        class: mw,
        values: $custom-sizes
    ),
    "min-width": (
        responsive: true,
        property: min-width,
        class: min-w,
        values: $custom-sizes
    ),
    "height": (
        responsive: true,
        property: height,
        class: h,
        values: $custom-sizes
    ),
    "max-height": (
        responsive: true,
        property: max-height,
        class: mh,
        values: $custom-sizes
    ),
    "min-height": (
        responsive: true,
        property: min-height,
        class: min-h,
        values: $custom-sizes
    ),
    "scroll-margin": (
        responsive: true,
        property: scroll-margin,
        class: scroll-m,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-x": (
        responsive: true,
        property: scroll-margin-right scroll-margin-left,
        class: scroll-mx,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-y": (
        responsive: true,
        property: scroll-margin-top scroll-margin-bottom,
        class: scroll-my,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-top": (
        responsive: true,
        property: scroll-margin-top,
        class: scroll-mt,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-end": (
        responsive: true,
        property: scroll-margin-right,
        class: scroll-me,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-bottom": (
        responsive: true,
        property: scroll-margin-bottom,
        class: scroll-mb,
        values: map-merge($spacers, (auto: auto))
    ),
    "scroll-margin-start": (
        responsive: true,
        property: scroll-margin-left,
        class: scroll-ms,
        values: map-merge($spacers, (auto: auto))
    ),
    "z-index": (
        property: z-index,
        class: z-index,
        values: (
            n1: -1, 
            0: 0,
            10: 10,
            100: 100,
            1000: 1000,
            10000: 10000
        )
    ),
    "opacity": (
        property: opacity,
        values: $opacity-values
    ),
    "background-size": (
        property: background-size,
        class: bg-size,
        values: initial auto contain cover
    ),
    "background-repeat": (
        property: background-repeat,
        class: bg-repeat,
        values: initial repeat no-repeat repeat-x repeat-y
    ),
    "background-position": (
        property: background-position,
        class: bg-position,
        values: top right bottom left center
    ),
    "rounded": (
        property: border-radius,
        class: rounded,
        values: (
            null: var(--#{$prefix}border-radius),
            0: 0,
            1: var(--#{$prefix}border-radius-sm),
            2: var(--#{$prefix}border-radius),
            3: var(--#{$prefix}border-radius-lg),
            4: var(--#{$prefix}border-radius-xl),
            5: var(--#{$prefix}border-radius-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-top": (
        property: border-top-left-radius border-top-right-radius,
        class: rounded-top,
        values: (
            null: var(--#{$prefix}border-radius),
            0: 0,
            1: var(--#{$prefix}border-radius-sm),
            2: var(--#{$prefix}border-radius),
            3: var(--#{$prefix}border-radius-lg),
            4: var(--#{$prefix}border-radius-xl),
            5: var(--#{$prefix}border-radius-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-end": (
        property: border-top-right-radius border-bottom-right-radius,
        class: rounded-end,
        values: (
            null: var(--#{$prefix}border-radius),
            0: 0,
            1: var(--#{$prefix}border-radius-sm),
            2: var(--#{$prefix}border-radius),
            3: var(--#{$prefix}border-radius-lg),
            4: var(--#{$prefix}border-radius-xl),
            5: var(--#{$prefix}border-radius-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-bottom": (
        property: border-bottom-right-radius border-bottom-left-radius,
        class: rounded-bottom,
        values: (
            null: var(--#{$prefix}border-radius),
            0: 0,
            1: var(--#{$prefix}border-radius-sm),
            2: var(--#{$prefix}border-radius),
            3: var(--#{$prefix}border-radius-lg),
            4: var(--#{$prefix}border-radius-xl),
            5: var(--#{$prefix}border-radius-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "rounded-start": (
        property: border-bottom-left-radius border-top-left-radius,
        class: rounded-start,
        values: (
            null: var(--#{$prefix}border-radius),
            0: 0,
            1: var(--#{$prefix}border-radius-sm),
            2: var(--#{$prefix}border-radius),
            3: var(--#{$prefix}border-radius-lg),
            4: var(--#{$prefix}border-radius-xl),
            5: var(--#{$prefix}border-radius-2xl),
            circle: 50%,
            pill: var(--#{$prefix}border-radius-pill)
        )
    ),
    "filter": (
        property: filter,
        class: ft,
        values: map-merge($filters, (none: none))
    ),
    "object-fit": (
        responsive: true,
        property: object-fit,
        values: (
            contain: contain,
            cover: cover,
            fill: fill,
            scale: scale-down,
            none: none,
        )
    )
);

Property values

These are the values we created for the properties above.

// Spacing
$spacer: 1.875rem !default;  // 30px
$spacers: (
    0: 0,
    1: $spacer * .125,       // 3.75px
    2: $spacer * .25,        // 7.5px
    3: $spacer * .333333,    // 10px
    4: $spacer * .5,         // 15px
    5: $spacer * .6666666667,// 20px
    6: $spacer,              // 30px
    7: $spacer * 1.5,        // 45px
    8: $spacer * 2,          // 60px
    9: $spacer * 3,          // 90px
    10: $spacer * 4.5,       // 135px
) !default;


// Custom hight and width sizes
$custom-sizes: (
    unset: unset,
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto,
    1px: 1px,
    2px: 2px,
    3px: 3px,
    4px: 4px,
    5px: 5px,
    6px: 6px,
    7px: 7px,
    8px: 8px,
    9px: 9px,
    10px: 10px,
    15px: 15px,
    20px: 20px,
    25px: 25px,
    30px: 30px,
    35px: 35px,
    40px: 40px,
    45px: 45px,
    50px: 50px,
    55px: 55px,
    60px: 60px,
    65px: 65px,
    70px: 70px,
    75px: 75px,
    80px: 80px,
    85px: 85px,
    90px: 90px,
    95px: 95px,
    100px: 100px,
    125px: 125px,
    150px: 150px,
    175px: 175px,
    200px: 200px,
    225px: 225px,
    250px: 250px,
    275px: 275px,
    300px: 300px,
    325px: 325px,
    350px: 350px,
    375px: 375px,
    400px: 400px,
    425px: 425px,
    450px: 450px,
    475px: 475px,
    500px: 500px,
    550px: 550px,
    600px: 600px,
    650px: 650px,
    700px: 700px,
    750px: 750px,
    800px: 800px,
    850px: 850px,
    900px: 900px,
    950px: 950px,
    1000px: 1000px
) !default;


// Custom position values
$position-values: (
    0: 0,
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto,
    1px: 1px,
    2px: 2px,
    3px: 3px,
    4px: 4px,
    5px: 5px,
    6px: 6px,
    7px: 7px,
    8px: 8px,
    9px: 9px,
    10px: 10px,
    15px: 15px,
    20px: 20px,
    25px: 25px,
    30px: 30px,
    35px: 35px,
    40px: 40px,
    45px: 45px,
    50px: 50px,
    55px: 55px,
    60px: 60px,
    65px: 65px,
    70px: 70px,
    75px: 75px,
    80px: 80px,
    85px: 85px,
    90px: 90px,
    95px: 95px,
    100px: 100px,
    125px: 125px,
    150px: 150px,
    175px: 175px,
    200px: 200px,
    225px: 225px,
    250px: 250px,
    275px: 275px,
    300px: 300px,
    325px: 325px,
    350px: 350px,
    375px: 375px,
    400px: 400px,
    425px: 425px,
    450px: 450px,
    475px: 475px,
    500px: 500px,
    550px: 550px,
    600px: 600px,
    650px: 650px,
    700px: 700px,
    750px: 750px,
    800px: 800px,
    850px: 850px,
    900px: 900px,
    950px: 950px,
    1000px: 1000px
) !default;


// Custom opacity values
$opacity-values: (
    0:   0,
    10:  .1,
    20:  .2,
    30:  .3,
    40:  .4,
    50:  .5,
    60:  .6,
    70:  .7,
    80:  .8,
    90:  .9,
    100: 1
) !default;

Extra helpers

Use .overlay class with .overlay-{theme-color} and .overlay-{opacity-value} to add colored and transparent layers on top of your images.

<div class="bg-size-cover bg-position-center bg-repeat-no-repeat overlay overlay-dark overlay-50 w-700px h-400px" style="background-image: url(../assets/images/covers/2-step-verification-cover.jpeg);"></div>

With .cursor-{cursor-type} classes, like pointer, none, not-allowed, text, default, help, move, copy and wait you can modify the original cursor type on any element.

<span class="cursor-pointer">Pointer</span>
<span class="cursor-none">None</span>
<span class="cursor-not-allowed">Not allowed</span>
<a href="#" class="cursor-text">Text (e.g. on link)</a>
<a href="#" class="cursor-default">Default (e.g. on link)</a>
<span class="cursor-help">Help</span>
<span class="cursor-move">Move</span>
<span class="cursor-copy">Copy</span>
<span class="cursor-wait">Wait</span>

Adding .text-bg-{theme-color}-soft you can set a background color with contrasting foreground color in soft version. This is an extension of Color & background on Bootstrap.

Soft primary with contrasting color
Soft secondary with contrasting color
Soft success with contrasting color
Soft danger with contrasting color
Soft warning with contrasting color
Soft info with contrasting color
Soft light with contrasting color
Soft dark with contrasting color


Primary Danger


Some quick example text to build on the card title and make up the bulk of the card's content.

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="text-bg-primary-soft p-3">Soft primary with contrasting color</div>
<div class="text-bg-secondary-soft p-3">Soft secondary with contrasting color</div>
<div class="text-bg-success-soft p-3">Soft success with contrasting color</div>
<div class="text-bg-danger-soft p-3">Soft danger with contrasting color</div>
<div class="text-bg-warning-soft p-3">Soft warning with contrasting color</div>
<div class="text-bg-info-soft p-3">Soft info with contrasting color</div>
<div class="text-bg-light-soft p-3">Soft light with contrasting color</div>
<div class="text-bg-dark-soft p-3">Soft dark with contrasting color</div>


<span class="badge text-bg-primary-soft">Primary</span>
<span class="badge text-bg-danger-soft">Danger</span>


<div class="card text-bg-primary-soft mb-3" style="max-width: 18rem;">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

<div class="card text-bg-info-soft mb-3" style="max-width: 18rem;">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>