The utility API is a Sass-based tool to generate utility classes.

Reference
Colored links NEW

You can use the .link-* classes to colorize links. these classes have a :hover and :focus state.

Text selection NEW

Change the way in which the content is selected when the user interacts with it.

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Line height NEW

Change the line height with .lh-* utilities.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum.

Pointer events NEW

Bootstrap provides pe-none and pe-auto classes to prevent or add element interactions.

This link can not be clicked.

This link can be clicked (this is default behaviour).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Position values NEW

Arrange elements easily with the edge positioning utilities, The format is {property}-{position}.


Center elements

In addition, you can also center the elements with the transform utility class .translate-middle.


Examples

Here are some real life examples of these classes.


You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the $position-values variable.

Border
Border color

Additive

Subtractive

Border width

Border radius Sizes

Border-radius

Utility class
Margin

Margin top

Margin bottom

Margin left

Margin right

Padding

Padding top

Padding bottom

Padding left

Padding right

Width

Height

Font-size

Font weight

Border width

Shadows
No shadow
Small shadow
Regular shadow
Larger shadow
Embeds
Aspect Ratios
Aspect Ratios 21 by 9

Aspect Ratios 16 by 9

Aspect Ratios 4 by 3

Aspect Ratios 1 by 1

Settings
Theme Mode

Light / Dark / System

  • Sidebar Caption

    Show / Hide

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed

  • Custom Theme

    Choose your primary theme color

  • Header Theme

    Choose your Header theme color

  • Navbar Theme

    Choose your Navbar theme color

  • Logo Theme

    Choose your Logo theme color

  • Navbar Caption Color

    Choose your Navbar Caption Color

  • Navbar Image

    Choose your Navbar Background Image

  • Dropdown Menu Icon

    Choose your Dropdown Menu Icon

  • Dropdown Menu Link Icon

    Choose your Dropdown Menu Link Icon