Inset Utilities
The inset utilities provide a set of classes to adjust the inset, inset-inline, inset-block, inset-inline-start, inset-inline-end, inset-block-start, inset-block-end, top, right, bottom and left properties of elements.
Inset
| Class Name | Property | Value |
|---|---|---|
.inset-0 | inset | 0 |
.inset-auto | inset | auto |
.inset-full | inset | 100% |
.inset-quarter | inset | 25% |
.inset-half | inset | 50% |
.inset-three-quarters | inset | 75% |
.inset-third | inset | calc(100%/ 3) |
.inset-two-thirds | inset | calc(100%/ 1.5) |
Inset X
| Class Name | Property | Value |
|---|---|---|
.inset-x-0 | inset-x | 0 |
.inset-x-auto | inset-x | auto |
.inset-x-full | inset-x | 100% |
.inset-x-quarter | inset-x | 25% |
.inset-x-half | inset-x | 50% |
.inset-x-three-quarters | inset-x | 75% |
.inset-x-third | inset-x | calc(100%/ 3) |
.inset-x-two-thirds | inset-x | calc(100%/ 1.5) |
Inset Y
| Class Name | Property | Value |
|---|---|---|
.inset-y-0 | inset-y | 0 |
.inset-y-auto | inset-y | auto |
.inset-y-full | inset-y | 100% |
.inset-y-quarter | inset-y | 25% |
.inset-y-half | inset-y | 50% |
.inset-y-three-quarters | inset-y | 75% |
.inset-y-third | inset-y | calc(100%/ 3) |
.inset-y-two-thirds | inset-y | calc(100%/ 1.5) |
Inset Inline
| Class Name | Property | Value |
|---|---|---|
.inset-inline-0 | inset-inline | 0 |
.inset-inline-auto | inset-inline | auto |
.inset-inline-full | inset-inline | 100% |
.inset-inline-quarter | inset-inline | 25% |
.inset-inline-half | inset-inline | 50% |
.inset-inline-three-quarters | inset-inline | 75% |
.inset-inline-third | inset-inline | calc(100%/ 3) |
.inset-inline-two-thirds | inset-inline | calc(100%/ 1.5) |
Inset Block
| Class Name | Property | Value |
|---|---|---|
.inset-block-0 | inset-block | 0 |
.inset-block-auto | inset-block | auto |
.inset-block-full | inset-block | 100% |
.inset-block-quarter | inset-block | 25% |
.inset-block-half | inset-block | 50% |
.inset-block-three-quarters | inset-block | 75% |
.inset-block-third | inset-block | calc(100%/ 3) |
.inset-block-two-thirds | inset-block | calc(100%/ 1.5) |
Inset Inline Start
| Class Name | Property | Value |
|---|---|---|
.inset-inline-start-0 | inset-inline-start | 0 |
.inset-inline-start-auto | inset-inline-start | auto |
.inset-inline-start-full | inset-inline-start | 100% |
.inset-inline-start-quarter | inset-inline-start | 25% |
.inset-inline-start-half | inset-inline-start | 50% |
.inset-inline-start-three-quarters | inset-inline-start | 75% |
.inset-inline-start-third | inset-inline-start | calc(100%/ 3) |
.inset-inline-start-two-thirds | inset-inline-start | calc(100%/ 1.5) |
Inset Inline End
| Class Name | Property | Value |
|---|---|---|
.inset-inline-end-0 | inset-inline-end | 0 |
.inset-inline-end-auto | inset-inline-end | auto |
.inset-inline-end-full | inset-inline-end | 100% |
.inset-inline-end-quarter | inset-inline-end | 25% |
.inset-inline-end-half | inset-inline-end | 50% |
.inset-inline-end-three-quarters | inset-inline-end | 75% |
.inset-inline-end-third | inset-inline-end | calc(100%/ 3) |
.inset-inline-end-two-thirds | inset-inline-end | calc(100%/ 1.5) |
Inset Block Start
| Class Name | Property | Value |
|---|---|---|
.inset-block-start-0 | inset-block-start | 0 |
.inset-block-start-auto | inset-block-start | auto |
.inset-block-start-full | inset-block-start | 100% |
.inset-block-start-quarter | inset-block-start | 25% |
.inset-block-start-half | inset-block-start | 50% |
.inset-block-start-three-quarters | inset-block-start | 75% |
.inset-block-start-third | inset-block-start | calc(100%/ 3) |
.inset-block-start-two-thirds | inset-block-start | calc(100%/ 1.5) |
Inset Block End
| Class Name | Property | Value |
|---|---|---|
.inset-block-end-0 | inset-block-end | 0 |
.inset-block-end-auto | inset-block-end | auto |
.inset-block-end-full | inset-block-end | 100% |
.inset-block-end-quarter | inset-block-end | 25% |
.inset-block-end-half | inset-block-end | 50% |
.inset-block-end-three-quarters | inset-block-end | 75% |
.inset-block-end-third | inset-block-end | calc(100%/ 3) |
.inset-block-end-two-thirds | inset-block-end | calc(100%/ 1.5) |
Top
| Class Name | Property | Value |
|---|---|---|
.top-0 | top | 0 |
.top-auto | top | auto |
.top-full | top | 100% |
.top-quarter | top | 25% |
.top-half | top | 50% |
.top-three-quarters | top | 75% |
.top-third | top | calc(100%/ 3) |
.top-two-thirds | top | calc(100%/ 1.5) |
Right
| Class Name | Property | Value |
|---|---|---|
.right-0 | right | 0 |
.right-auto | right | auto |
.right-full | right | 100% |
.right-quarter | right | 25% |
.right-half | right | 50% |
.right-three-quarters | right | 75% |
.right-third | right | calc(100%/ 3) |
.right-two-thirds | right | calc(100%/ 1.5) |
Bottom
| Class Name | Property | Value |
|---|---|---|
.bottom-0 | bottom | 0 |
.bottom-auto | bottom | auto |
.bottom-full | bottom | 100% |
.bottom-quarter | bottom | 25% |
.bottom-half | bottom | 50% |
.bottom-three-quarters | bottom | 75% |
.bottom-third | bottom | calc(100%/ 3) |
.bottom-two-thirds | bottom | calc(100%/ 1.5) |
Left
| Class Name | Property | Value |
|---|---|---|
.left-0 | left | 0 |
.left-auto | left | auto |
.left-full | left | 100% |
.left-quarter | left | 25% |
.left-half | left | 50% |
.left-three-quarters | left | 75% |
.left-third | left | calc(100%/ 3) |
.left-two-thirds | left | calc(100%/ 1.5) |
Customization
To customize the alignment utilities, you can use the following variables.
| Variable | Description | Default Value |
|---|---|---|
$selector-base | Base selector for utility classes. | "." |
$selector-prefix | The selector prefix for all utility classes. | "" |
$selector-suffix | The selctor suffix for all utility classes. | "" |
$selector-separator | The selector separator for all utility classes. | "" |
$use-important | Appends !important to generated utility declarations. | true |
$generate-base-utilities | Generates the base utility classes. | true |
$screen-aware | Enables screen-aware utility variants. | false |
$theme-aware | Enables theme-aware utility variants. | false |
$scheme-aware | Enables scheme-aware utility variants. | false |
$state-aware | Enables state-aware utility variants. | false |
$container-aware | Enables container-aware utility variants. | false |
$screen-aware-selector-prefix | Prefix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-suffix | Suffix to the screen-aware portion of utility selectors. | "" |
$screen-aware-selector-separator | Separator inserted for screen-aware utility selectors. | "\\:" |
$theme-aware-selector-prefix | Prefix to the theme-aware portion of utility selectors. | "" |
$theme-aware-selector-suffix | Suffix to the theme-aware portion of utility selectors. | "-theme" |
$theme-aware-selector-separator | Separator inserted for theme-aware utility selectors. | "\\:" |
$scheme-aware-selector-prefix | Prefix to the scheme-aware portion of utility selectors. | "" |
$scheme-aware-selector-suffix | Suffix to the scheme-aware portion of utility selectors. | "-mode" |
$scheme-aware-selector-separator | Separator inserted for scheme-aware utility selectors. | "\\:" |
$state-aware-selector-prefix | Prefix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-suffix | Suffix to the state-aware portion of utility selectors. | "" |
$state-aware-selector-separator | Separator inserted for state-aware utility selectors. | "\\:" |
$container-aware-selector-prefix | Prefix to the container-aware portion of utility selectors. | "cq\\:" |
$container-aware-selector-suffix | Suffix to the container-aware portion of utility selectors. | "" |
$container-aware-selector-separator | Separator inserted for container-aware utility selectors. | "\\:" |
$utility-properties | Map of utility properties. | () |
$utility-values | Map of utility values. | () |
$utility-map | Map of utility property/value pairs. | () |
Responsive Variants
Generating responsive utility classes can be done by setting $screen-aware, $theme-aware, $scheme-aware, $state-aware, or $container-aware to true.
By default, screen-aware responsive utility classes are generated for inset.
✏️ Note
For more information on responsive variants, refer to the Responsive utility classes documentation.