Display and Alignment

The display utilities control how elements are rendered on the page and how they're aligned within flex containers.

Display Types

Use the pattern d-{type} to control element display types:

Class	CSS Applied
`d-b`	`display: block`
`d-ib`	`display: inline-block`
`d-f`	`display: flex`
`d-if`	`display: inline-flex`
`d-n`	`display: none !important`
`d-hide`	`visibility: hidden !important`

Example

<div class="d-b">Display: Block</div>
<div class="d-ib">Display: Inline-Block</div>
<div class="d-f">Display: Flex</div>
<div class="d-if">Display: Inline-Flex</div>
<div class="d-n">Display: None (Hidden)</div>
<div class="d-hide">Visibility: Hidden (Space reserved)</div>

Positioning

Use the pattern dp-{position} to control element positioning:

Class	CSS Applied
`dp-r`	`position: relative`
`dp-a`	`position: absolute`
`dp-s`	`position: sticky`
`dp-f`	`position: fixed`

Flex Utilities

Comprehensive utilities for working with flexbox layouts.

Alignment

Use these patterns to control flex item alignment: - dy-{value} for vertical alignment (align-items) - dx-{value} for horizontal alignment (justify-content)

Class	Description	CSS Applied
`dy-fs`	Align items flex-start	`align-items: flex-start`
`dy-fe`	Align items flex-end	`align-items: flex-end`
`dy-ce`	Align items center	`align-items: center`
`dy-st`	Align items stretch	`align-items: stretch`
`dx-fs`	Justify content flex-start	`justify-content: flex-start`
`dx-fe`	Justify content flex-end	`justify-content: flex-end`
`dx-ce`	Justify content center	`justify-content: center`
`dx-sb`	Justify content space-between	`justify-content: space-between`
`dx-sa`	Justify content space-around	`justify-content: space-around`
`dx-se`	Justify content space-evenly	`justify-content: space-evenly`

Example - Alignment

<!-- Centered content horizontally and vertically -->
<div class="d-f dx-ce dy-ce">
  <div>Perfectly centered content</div>
</div>

<!-- Space between items horizontally, align to top -->
<div class="d-f dx-sb dy-fs">
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</div>

Flex Direction and Growth

Control flex direction and item growth:

Class	CSS Applied
`df-row`	`flex-direction: row`
`df-col`	`flex-direction: column`
`df-fw`	`flex-wrap: wrap`
`df-g0`	`flex-grow: 0 !important`
`df-g1`	`flex-grow: 1 !important`

df-col

When using df-col (flex-direction: column), a fixed height is required for flex-grow to work properly.

Example - Flex Growth and Direction

<!-- Items with varying growth -->
<div class="d-f dx-sb">
  <div class="df-g1">Wide</div>
  <div class="df-g0">Narrow</div>
  <div class="df-g1">Wide</div>
</div>

<!-- Column layout with wrapping -->
<div class="d-f df-col df-fw" style="height: 300px">
  <div>First</div>
  <div class="df-g1">Grows to fill space</div>
  <div>Last</div>
</div>