Bootstrap 5 provides display notation classes to control the visibility of elements. Classes like d-none hide elements, d-block shows them as block-level elements, d-inline as inline elements, and d-flex as flex containers. These classes can be combined with breakpoints (d-md-block, d-lg-inline, etc.) for responsive visibility control. The standard format for using this display utility class is .d-{breakpoint}-{value} where the breakpoint takes the standard Bootstrap breakpoint values such as the sm, md, lg, xl and xxl. The value attribute takes the different display properties like flex, inline-block, etc.
Bootstrap 5 Display Notation Used classes:
- d-{value}: This class holds the value of the display property and which display property it will hold is specified by the value part of this class.
- d-{breakpoint}-{value}: This class does the same job as the d-{value} class but this is the custom responsive variant of it, the breakpoint part of this class is changed into values like sm, md, lg, xl and xxl.
The values which can be substituted in the value attribute of the format:
- none: By using the attribute has substituted the element which has this class is completely removed from the viewport.
- inline: By using the attribute substituted with this the element acts as an inline element
- inline-block: By using this value the element acts as an inline element but the element reacts to the width and height properties.
- block: the attribute is substituted with this the element takes gets placed in a new line and takes up the entire width.
- grid: the attribute is substituted with this the element acts like a block-level grid container.
- table: the attribute is substituted with this the element acts like an <table> element.
- table-cell: When the attribute is substituted with this the element acts like an <td> element.
- table-row: When the attribute is substituted with this the element acts like <tr> element.
- flex: When the attribute is substituted with this the element acts like a block-level grid container.
- inline-flex: When the attribute is substituted with this the element acts as an inline-level flex container.
Syntax:
<div class="d-{value}">...</div>
<div class="d-{breakpoint}-{value}">...</div>
Example 1: The code below demonstrates how we can add the display notation classes like work:
<!DOCTYPE html><html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="text-success ms-3">
GeeksforGeeks
</h1>
<h3 class="ms-3">Bootstrap 5 Display Notation</h3>
<div class="container mt-4">
<div>In this example:
<p class="d-inline w-50 h-75
border border-success border-3
p-1 mt-2 bg-light">
This part has an inline display
</p>
and we can see no matter
what width and height values it
has it doesn't change
</div>
<hr>
<div>In this example:
<p class="d-inline-block w-75 border
border-success border-3
p-1 mt-2 bg-light">
This part has an inline-block display
</p> and we can see it takes up the width and
height values while staying an inline element.
</div>
<hr>
<div>In this example:
<p class="d-block w-75 border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline-block display
</p> and we can see it starts
on a new line with spaces above and below it.
</div>
<hr>
<p>The below example shows a flex container display:</p>
<div class="d-flex gap-2 mt-2 text-light">
<div class="bg-success w-25 border p-1">
Column 1
</div>
<div class="bg-success w-25 border p-1">
Column 2
</div>
<div class="bg-success w-25 border p-1">
Column 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrates how we can add the responsive display notation classes and make them work:
<!doctype html><html lang="en">
<head>
<link href=
<script src=
</script>
</head>
<body>
<h1 class="text-success ms-3">
GeeksforGeeks
</h1>
<h3 class="ms-3">
Bootstrap 5 Display Notation
</h3>
<div class="container mt-4">
<div>In this example:
<p class="d-inline-block d-lg-block w-75
border border-success border-3
p-1 mt-2 bg-light">
This part has an inline-block display in
viewport above lg size
</p>
and we can see it starts on a new line
with spaces above and below it.
</div>
<hr>
<div>In this example:
<p class="d-inline d-lg-inline-block w-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline-block
display in viewport above lg size
</p>
and we can see it takes up the width and height
values while staying an inline element.
</div>
<hr>
<div>In this example:
<p class="d-block d-lg-inline w-50 h-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline display
in viewport above lg size
</p>
and we can see no matter what width and height
values it has it doesn't change
</div>
<hr>
<p>The below example shows a flex container display</p>
<div class="d-lg-flex gap-2 mt-2 text-light">
<div class="bg-success w-25 border p-1">
Column 1
</div>
<div class="bg-success w-25 border p-1">
Column 2
</div>
<div class="bg-success w-25 border p-1">
Column 3
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/utilities/display/#notation