#### Utilities

#### Color & Background

Color and background helpers combine the power of our `.text-*` utilities and `.bg-*` utilities in one class. Using our Sass `color-contrast()` function, we automatically determine a contrasting `color` for a particular `background-color`.

Primary with contrasting color (.text-bg-primary)
Secondary with contrasting color (.text-bg-secondary)
Success with contrasting color (.text-bg-success)
Danger with contrasting color (.text-bg-danger)
Warning with contrasting color (.text-bg-warning)
Info with contrasting color (.text-bg-info)
Light with contrasting color (.text-bg-light)
Dark with contrasting color (.text-bg-dark)
Purple with contrasting color (.text-bg-purple)

#### Background Opacity

`background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary background
This is 75% opacity primary background
This is 50% opacity primary background
This is 25% opacity primary background
This is 10% opacity success background
This is default dark background
This is 75% opacity dark background
This is 50% opacity dark background
This is 25% opacity dark background
This is 10% opacity success background

#### Text Opacity Color

Text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

This is default primary text
This is 75% opacity primary text
This is 50% opacity primary text
This is 25% opacity primary text

#### Opacity

The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent. Set the `opacity` of an element using `.opacity-{value}` utilities.

100%
75%
50%
25%

#### Border Radius

Add classes to an element to easily round its corners.

#### Pointer Events

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 behavior).

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.

#### Border Radius Size

Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`.

#### Text Selection

Use `user-select-all`, `user-select-auto`, or `user-select-none` class to the content which 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.

#### Overflow

Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.

This is an example of using `.overflow-auto` on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using `.overflow-hidden` on an element with set width and height dimensions.
This is an example of using `.overflow-visible` on an element with set width and height add more text dimensions myFav admin dashboard template.
This is an example of using `.overflow-scroll` on an element with set width and height dimensions.

#### Position in Arrange

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

#### Position in Center

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

#### Position in Axis

By adding `.translate-middle-x` or `.translate-middle-y` classes, elements can be positioned only in horizontal or vertical direction.

#### Shadows

While shadows on components are disabled by default in Bootstrap and can be enabled via `$enable-shadows`, you can also quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).

No shadow
Small shadow
Regular shadow
Larger shadow

#### Width

Width utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

#### Height

Height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.

Height25%
Height50%
Height75%
Height100%
Height auto

#### Object Fit

Change the value of the `object-fit` property with our responsive `object-fit` utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.

`.object-fit-contain`

`.object-fit-cover`

`.object-fit-fill`

`.object-fit-scale`

`.object-fit-none`

#### Z-index

Use `z-index` utilities to stack elements on top of one another. Requires a `position` value other than `static`, which can be set with custom styles or using our position utilities.

##### Admin Customizer

Easily configure layout, styles, and preferences for your admin interface.

##### Select Theme

##### Default

##### Material

##### Modern

##### SaaS

##### Flat

##### Minimal

##### Color Scheme

##### Light

##### Dark

##### System

##### Topbar Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Sidenav Color

##### Light

##### Dark

##### Gray

##### Gradient

##### Image

##### Sidebar Size

##### Default

##### Compact

##### Condensed

##### On Hover

##### On Hover - Show

##### Offcanvas

##### Layout Position

Fixed Scrollable

##### Sidebar User Info