- ##### Basic Components

- All
- Alert
- Button
- Badges
- Breadcrumb
- Cards
- Color
- Collapse
- Carousel
- Dropdowns
- Offcanvas
- Pagination
- Progress
- List group
- Modal
- Spinner
- Tabs & pills
- Tooltip
- Toasts
- Typography
- Other

- ##### Advance Components

- Sweet alert
- Datepicker
- Lightbox
- Modal
- Notification
- Rangeslider
- Slider
- Syntax Highlighter
- Tour
- Tree view

Explore Components

## 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.

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

###### Border width

.b-wid-1 .b-wid-2 .b-wid-3 .b-wid-4 .b-wid-5 .b-wid-6 .b-wid-7 .b-wid-8

##### 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

  Choose light or dark mode or Auto

- ###### Sidebar Theme

  Choose Sidebar Theme

- ###### Accent color

  Choose your primary theme color

- ###### Sidebar Caption

  Sidebar Caption Hide/Show

- ###### Theme Layout

  LTR/RTL

- ###### Layout Width

  Choose Full or Container Layout