Display

Effortlessly toggle the display values of components and more with Astral.CSS display utilities, simplifying your web design and enhancing user interaction.

The CSS display property is one of the most powerful and widely-used properties in web design. It defines how elements are displayed in the layout, controlling their behavior and how they interact with other elements on the page. From building complex grid systems to hiding elements or creating flexible layouts, the display property is essential for crafting modern web experiences.

Notation

Display utility classes that apply to all breakpoints, from sm to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query.

As such, the classes are named using the format:

• .d-{value} for sm to xl
• .d-{breakpoint}-{value} for sm, md, lg,and xl.

Where value is one of: none,inline,inline-block,block, grid, table,table-cell,table-row,flex and inline-flex

Display - Inline

The display: inline value allows elements to flow inline with other text content. Inline elements take up only as much space as their content requires and do not start on a new line. Common inline elements include span, a tag, and strong.

d-inline
d-inline

Display - Block

The display: block value makes an element a block-level element. Block elements take up the full width of their parent container by default and always start on a new line. Common block elements include h1 tags,divs etc.Check more block-level elements here.

d-block
d-block