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-0inset 0.inset-autoinset auto.inset-fullinset 100%.inset-quarterinset 25%.inset-halfinset 50%.inset-three-quartersinset 75%.inset-thirdinset calc(100%/ 3).inset-two-thirdsinset calc(100%/ 1.5)
<div class="inset-0"></div>
Inset property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset X Class Name Property Value .inset-x-0inset-x 0.inset-x-autoinset-x auto.inset-x-fullinset-x 100%.inset-x-quarterinset-x 25%.inset-x-halfinset-x 50%.inset-x-three-quartersinset-x 75%.inset-x-thirdinset-x calc(100%/ 3).inset-x-two-thirdsinset-x calc(100%/ 1.5)
<div class="inset-x-0"></div>
Inset X property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Y Class Name Property Value .inset-y-0inset-y 0.inset-y-autoinset-y auto.inset-y-fullinset-y 100%.inset-y-quarterinset-y 25%.inset-y-halfinset-y 50%.inset-y-three-quartersinset-y 75%.inset-y-thirdinset-y calc(100%/ 3).inset-y-two-thirdsinset-y calc(100%/ 1.5)
<div class="inset-y-0"></div>
Inset Y property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Inline Class Name Property Value .inset-inline-0inset-inline 0.inset-inline-autoinset-inline auto.inset-inline-fullinset-inline 100%.inset-inline-quarterinset-inline 25%.inset-inline-halfinset-inline 50%.inset-inline-three-quartersinset-inline 75%.inset-inline-thirdinset-inline calc(100%/ 3).inset-inline-two-thirdsinset-inline calc(100%/ 1.5)
<div class="inset-inline-0"></div>
Inset Inline property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Block Class Name Property Value .inset-block-0inset-block 0.inset-block-autoinset-block auto.inset-block-fullinset-block 100%.inset-block-quarterinset-block 25%.inset-block-halfinset-block 50%.inset-block-three-quartersinset-block 75%.inset-block-thirdinset-block calc(100%/ 3).inset-block-two-thirdsinset-block calc(100%/ 1.5)
<div class="inset-block-0"></div>
Inset Block property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Inline Start Class Name Property Value .inset-inline-start-0inset-inline-start 0.inset-inline-start-autoinset-inline-start auto.inset-inline-start-fullinset-inline-start 100%.inset-inline-start-quarterinset-inline-start 25%.inset-inline-start-halfinset-inline-start 50%.inset-inline-start-three-quartersinset-inline-start 75%.inset-inline-start-thirdinset-inline-start calc(100%/ 3).inset-inline-start-two-thirdsinset-inline-start calc(100%/ 1.5)
<div class="inset-inline-start-0"></div>
Inset Inline Start property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Inline End Class Name Property Value .inset-inline-end-0inset-inline-end 0.inset-inline-end-autoinset-inline-end auto.inset-inline-end-fullinset-inline-end 100%.inset-inline-end-quarterinset-inline-end 25%.inset-inline-end-halfinset-inline-end 50%.inset-inline-end-three-quartersinset-inline-end 75%.inset-inline-end-thirdinset-inline-end calc(100%/ 3).inset-inline-end-two-thirdsinset-inline-end calc(100%/ 1.5)
<div class="inset-inline-end-0"></div>
Inset Inline End property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Block Start Class Name Property Value .inset-block-start-0inset-block-start 0.inset-block-start-autoinset-block-start auto.inset-block-start-fullinset-block-start 100%.inset-block-start-quarterinset-block-start 25%.inset-block-start-halfinset-block-start 50%.inset-block-start-three-quartersinset-block-start 75%.inset-block-start-thirdinset-block-start calc(100%/ 3).inset-block-start-two-thirdsinset-block-start calc(100%/ 1.5)
<div class="inset-block-start-0"></div>
Inset Block Start property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Inset Block End Class Name Property Value .inset-block-end-0inset-block-end 0.inset-block-end-autoinset-block-end auto.inset-block-end-fullinset-block-end 100%.inset-block-end-quarterinset-block-end 25%.inset-block-end-halfinset-block-end 50%.inset-block-end-three-quartersinset-block-end 75%.inset-block-end-thirdinset-block-end calc(100%/ 3).inset-block-end-two-thirdsinset-block-end calc(100%/ 1.5)
<div class="inset-block-end-0"></div>
Inset Block End property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Top Class Name Property Value .top-0top 0.top-autotop auto.top-fulltop 100%.top-quartertop 25%.top-halftop 50%.top-three-quarterstop 75%.top-thirdtop calc(100%/ 3).top-two-thirdstop calc(100%/ 1.5)
<div class="top-0"></div>
Top property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Right Class Name Property Value .right-0right 0.right-autoright auto.right-fullright 100%.right-quarterright 25%.right-halfright 50%.right-three-quartersright 75%.right-thirdright calc(100%/ 3).right-two-thirdsright calc(100%/ 1.5)
<div class="right-0"></div>
Right property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Bottom Class Name Property Value .bottom-0bottom 0.bottom-autobottom auto.bottom-fullbottom 100%.bottom-quarterbottom 25%.bottom-halfbottom 50%.bottom-three-quartersbottom 75%.bottom-thirdbottom calc(100%/ 3).bottom-two-thirdsbottom calc(100%/ 1.5)
<div class="bottom-0"></div>
Bottom property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Left Class Name Property Value .left-0left 0.left-autoleft auto.left-fullleft 100%.left-quarterleft 25%.left-halfleft 50%.left-three-quartersleft 75%.left-thirdleft calc(100%/ 3).left-two-thirdsleft calc(100%/ 1.5)
<div class="left-0"></div>
Left property 0 Auto Full Quarter Half Three Quarters Third Two Thirds
Customization To customize the alignment utilities, you can use the following variables.
Variable Description Default Value $selector-baseBase selector for utility classes. "."$selector-prefixThe selector prefix for all utility classes. ""$selector-suffixThe selctor suffix for all utility classes. ""$selector-separatorThe selector separator for all utility classes. ""$use-importantAppends !important to generated utility declarations. true$generate-base-utilitiesGenerates the base utility classes. true$screen-awareEnables screen-aware utility variants. false$theme-awareEnables theme-aware utility variants. false$scheme-awareEnables scheme-aware utility variants. false$state-awareEnables state-aware utility variants. false$container-awareEnables container-aware utility variants. false$screen-aware-selector-prefixPrefix to the screen-aware portion of utility selectors. ""$screen-aware-selector-suffixSuffix to the screen-aware portion of utility selectors. ""$screen-aware-selector-separatorSeparator inserted for screen-aware utility selectors. "\\:"$theme-aware-selector-prefixPrefix to the theme-aware portion of utility selectors. ""$theme-aware-selector-suffixSuffix to the theme-aware portion of utility selectors. "-theme"$theme-aware-selector-separatorSeparator inserted for theme-aware utility selectors. "\\:"$scheme-aware-selector-prefixPrefix to the scheme-aware portion of utility selectors. ""$scheme-aware-selector-suffixSuffix to the scheme-aware portion of utility selectors. "-mode"$scheme-aware-selector-separatorSeparator inserted for scheme-aware utility selectors. "\\:"$state-aware-selector-prefixPrefix to the state-aware portion of utility selectors. ""$state-aware-selector-suffixSuffix to the state-aware portion of utility selectors. ""$state-aware-selector-separatorSeparator inserted for state-aware utility selectors. "\\:"$container-aware-selector-prefixPrefix to the container-aware portion of utility selectors. "cq\\:"$container-aware-selector-suffixSuffix to the container-aware portion of utility selectors. ""$container-aware-selector-separatorSeparator inserted for container-aware utility selectors. "\\:"$utility-propertiesMap of utility properties. ()$utility-valuesMap of utility values. ()$utility-mapMap 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.
