Bootstrap 5 Display

Bootstrap 5 provides utility classes to control the display property of elements, allowing you to easily toggle visibility and layout of elements.

Syntax:

display-{size?}-{type}

display: Indicates display.
size (optional): Responsive breakpoint (e.g., sm : ≥576px, md : ≥ 768px, lg : ≥992px, xl : ≥1200px, xxl : ≥1400px).
type : Defines the display type (e.g., none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell).

Example:

.d-flex
.d-sm-flex
.d-md-flex
.d-lg-flex
.d-xl-flex
.d-xxl-flex

Class	Description
d-none	Hides the element (`display: none`)
d-inline	Inline display (`display: inline`)
d-inline-block	Inline-block display (`display: inline-block`)
d-block	Block display (`display: block`)
d-flex	Flex display (`display: flex`)
d-inline-flex	Inline flex (`display: inline-flex`)
d-grid	Grid display (`display: grid`)
d-inline-grid	Inline grid (`display: inline-grid`)
d-table	Table display (`display: table`)
d-table-row	Table row (`display: table-row`)
d-table-cell	Table cell (`display: table-cell`)

This navbar changes

display style at different breakpoints.

Example

<div>This navbar changes</div>

display style at different breakpoints.

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Syntax:

Class

Description