Advertisement
Google Ad Slot: content-top
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 ( |
d-inline |
Inline display ( |
d-inline-block |
Inline-block display ( |
d-block |
Block display ( |
d-flex |
Flex display ( |
d-inline-flex |
Inline flex ( |
d-grid |
Grid display ( |
d-inline-grid |
Inline grid ( |
d-table |
Table display ( |
d-table-row |
Table row ( |
d-table-cell |
Table cell ( |
This navbar changes
display style at different breakpoints.
Example
<div class="d-flex d-md-block d-lg-none bg-primary text-white p-2">
<div>This navbar changes</div>
display style at different breakpoints.
</div>