Bootstrap 5 Display Notation
Last Updated :
23 Jul, 2024
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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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:
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</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
Similar Reads
Bootstrap 5 Display in Print Bootstrap 5 Display in print is used to display or hide some content when printing. This can be combined with viewports also. For example, some content can be made to show to all viewports except large screens and it is also made invisible when we print that page. Bootstrap 5 Display in print Classe
2 min read
Bootstrap 5 Display With Bootstrap 5 display tools, you can easily and quickly change the display value of components and more. With the help of Bootstrap responsive display utility classes, you may modify the value of the display property. For presentation purposes, we purposefully only support a portion of all potent
3 min read
Bootstrap 5 Display Hiding Elements Bootstrap 5 Display Hiding elements is used to display or hide some content. This can be done based on screen size also.Bootstrap 5 Display Hiding Elements Classes:d-*-none: To hide the content based on the viewport. The * can be substituted with viewports like sm, md, lg, xl, xxl.d-*-block: To show
2 min read
Bootstrap 5 Spacing The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an
3 min read
What is Bootstrap 5? Bootstrap is a popular open-source front-end framework designed for developing responsive, mobile-first websites and web applications. It provides a collection of HTML, CSS, and JavaScript components that simplify the process of creating modern and responsive designs, making it easier for developers
8 min read
Bootstrap 5 Float Bootstrap 5 Float classes use the current viewport size to float an element to the left, right, or deactivate floating. !Important is mentioned to prevent issues with specificity. Please be mindful that flex objects are unaffected by float utilities. This is the replacement of CSS float property tha
3 min read