Extra Features | Datta able Dashboard Template

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.

User select all

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

User select auto

This paragraph has default select behavior.

User select none

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

Line height NEW

Change the line height with .lh-* utilities.

Line height 1

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

Line height small

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

Line height base

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

Line height large

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.

Pointer events none

This link can not be clicked.

Pointer events auto

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

Pointer events combine

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

.m-0 .m-5 .m-10 .m-15 .m-20 .m-25 .m-30 .m-35 .m-40 .m-45 .m-50

Margin top

.m-t-0 .m-t-5 .m-t-10 .m-t-15 .m-t-20 .m-t-25 .m-t-30 .m-t-35 .m-t-40 .m-t-45 .m-t-50

Margin bottom

.m-b-0 .m-b-5 .m-b-10 .m-b-15 .m-b-20 .m-b-25 .m-b-30 .m-b-35 .m-b-40 .m-b-45 .m-b-50

Margin left

.m-l-0 .m-l-5 .m-l-10 .m-l-15 .m-l-20 .m-l-25 .m-l-30 .m-l-35 .m-l-40 .m-l-45 .m-l-50

Margin right

.m-r-0 .m-r-5 .m-r-10 .m-r-15 .m-r-20 .m-r-25 .m-r-30 .m-r-35 .m-r-40 .m-r-45 .m-r-50

Padding

.p-0 .p-5 .p-10 .p-15 .p-20 .p-25 .p-30 .p-35 .p-40 .p-45 .p-50

Padding top

.p-t-0 .p-t-5 .p-t-10 .p-t-15 .p-t-20 .p-t-25 .p-t-30 .p-t-35 .p-t-40 .p-t-45 .p-t-50

Padding bottom

.p-b-0 .p-b-5 .p-b-10 .p-b-15 .p-b-20 .p-b-25 .p-b-30 .p-b-35 .p-b-40 .p-b-45 .p-b-50

Padding left

.p-l-0 .p-l-5 .p-l-10 .p-l-15 .p-l-20 .p-l-25 .p-l-30 .p-l-35 .p-l-40 .p-l-45 .p-l-50

Padding right

.p-r-0 .p-r-5 .p-r-10 .p-r-15 .p-r-20 .p-r-25 .p-r-30 .p-r-35 .p-r-40 .p-r-45 .p-r-50

Width

.wid-20 .wid-25 .wid-30 .wid-35 .wid-40 .wid-45 .wid-50 .wid-55 .wid-60 .wid-65 .wid-70 .wid-75 .wid-80 .wid-85 .wid-90 .wid-95 .wid-100 .wid-105 .wid-110 .wid-115 .wid-120 .wid-125 .wid-130 .wid-135 .wid-140 .wid-145 .wid-150

Height

.hei-20 .hei-25 .hei-30 .hei-35 .hei-40 .hei-45 .hei-50 .hei-55 .hei-60 .hei-65 .hei-70 .hei-75 .hei-80 .hei-85 .hei-90 .hei-95 .hei-100 .hei-105 .hei-110 .hei-115 .hei-120 .hei-125 .hei-130 .hei-135 .hei-140 .hei-145 .hei-150

Font-size

.f-10 .f-12 .f-14 .f-16 .f-18 .f-20 .f-22 .f-24 .f-26 .f-28 .f-30 .f-32 .f-34 .f-36 .f-38 .f-40 .f-42 .f-44 .f-46 .f-48 .f-50 .f-52 .f-54 .f-56 .f-58 .f-60 .f-62 .f-64 .f-66 .f-68 .f-70 .f-72 .f-74 .f-76 .f-78 .f-80

Font weight

.f-w-100 .f-w-200 .f-w-300 .f-w-400 .f-w-500 .f-w-600 .f-w-700 .f-w-800 .f-w-900

UI/UX Design

Message

Forms

Challenge invitation

Security

Carson Darrin 🖖

Extra

Colored links NEW

Text selection NEW

Line height NEW

Pointer events NEW

Position values NEW

Center elements

Examples

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

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

Sidebar theme

Sidebar Caption

Theme Layout

Layout Width

Custom Theme

Header Theme

Navbar Theme

Logo Theme

Navbar Caption Color

Navbar Image

Dropdown Menu Icon

Dropdown Menu Link Icon