Display

Utilities for controlling the display box type of an element.

Class names

Class	Description
hbox	display: flex; flex-direction: row;
sm:hbox	display: flex; flex-direction: row; from the sm breakpoint upward.
md:hbox	display: flex; flex-direction: row; from the md breakpoint upward.
lg:hbox	display: flex; flex-direction: row; from the lg breakpoint upward.
xl:hbox	display: flex; flex-direction: row; from the xl breakpoint upward.
vbox	display: flex; flex-direction: column;
sm:vbox	display: flex; flex-direction: column; from the sm breakpoint upward.
md:vbox	display: flex; flex-direction: column; from the md breakpoint upward.
lg:vbox	display: flex; flex-direction: column; from the lg breakpoint upward.
xl:vbox	display: flex; flex-direction: column; from the xl breakpoint upward.
flex	display: flex;
sm:flex	display: flex; from the sm breakpoint upward.
md:flex	display: flex; from the md breakpoint upward.
lg:flex	display: flex; from the lg breakpoint upward.
xl:flex	display: flex; from the xl breakpoint upward.
grid	display: grid;
block	display: block;
sm:block	display: block; from the sm breakpoint upward.
md:block	display: block; from the md breakpoint upward.
lg:block	display: block; from the lg breakpoint upward.
xl:block	display: block; from the xl breakpoint upward.
inline	display: inline;
inline-block	display: inline-block;
inline-flex	display: inline-flex;
hidden	display: none;
sm:hidden	display: none; from the sm breakpoint upward.
md:hidden	display: none; from the md breakpoint upward.
lg:hidden	display: none; from the lg breakpoint upward.
xl:hidden	display: none; from the xl breakpoint upward.
sr-only	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0;