- ☀️Light
- 🌙Dark
- 💻System
📐 What is display used for?
Display utilities control how an element is rendered in the layout: block, inline, flex, grid, or completely hidden. They provide a quick way to change layout behavior without writing custom CSS and are fully responsive thanks to breakpoint suffixes.
You can use base classes such as
.d-block,
.d-flex,
.d-none
for all screen sizes, or responsive variants like
.d-flex-md,
.d-none-lg
that only apply from a specific breakpoint.
💠 Examples
The examples below show how display utilities affect layout and how responsive variants can toggle visibility or layout mode depending on screen size.
.d-block — takes full width.
.d-inline — stays in the text flow.
Another .d-inline
Using .d-flex to align items on a single row.
Item 1
Item 2
Item 3
Example with .d-none and
.d-block-md:
hidden on very small screens, visible from the md breakpoint.
.d-none .d-block-md — only visible from md and up.
Using .d-block and
.d-flex-md:
stacked vertically on small screens, aligned horizontally from md.
Item A
Item B
Item C
Using .d-grid to create a simple grid layout.
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
💻 HTML Code
Block element
Inline element
Flex item 1
Flex item 2
Visible only from the md breakpoint and up.
Item A
Item B
Item C
Cell 1
Cell 2
Cell 3
📏 Display Utilities & Breakpoints
Display utilities control how an element participates in the layout:
hidden, inline, block, grid, or flex. Base classes apply to all screen sizes,
while responsive variants are generated for each breakpoint from the
$breakpoints map.
You can combine a non-responsive utility (for the default behavior) with breakpoint-specific ones to progressively change how an element is displayed as the viewport grows.
.d-none
Completely hides the element from the layout on all screen sizes.
.d-inline
Renders the element as inline content, flowing with text and not forcing line breaks.
.d-inline-block
Renders the element inline but allows width and height to be set, like a hybrid block/inline.
.d-block
Renders the element as a block-level element, taking the full available width and breaking the line.
.d-grid
Turns the element into a grid container. Define columns and rows with CSS grid properties.
.d-flex
Turns the element into a flex container. Combine with flex utilities
(.fd-*, .jc-*, .ai-*, etc.) to control layout.
.d-inline-flex
Similar to .d-flex but keeps the element inline with surrounding content.
.d-{value}-{breakpoint}
Applies a display mode only from a specific breakpoint
(for example:
.d-none-sm,
.d-block-md,
.d-flex-lg,
.d-grid-xl).
.d-none .d-{value}-{breakpoint}
Common pattern to hide an element on small screens and show it from a breakpoint
(for example:
.d-none .d-block-md or
.d-none .d-flex-lg).