Utilities

Utilities

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.

Primary link Secondary link Success link Danger link Warning link Info link
Dark link
Light link
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
Theme Customization
  • Theme Mode

    Light / Dark / System

  • Accent color

    Choose your primary theme color

  • Sidebar Caption

    Caption Hide / Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Full / Fixed width

  • Font Style

    Choose theme font