Bootstrap Display
The display is a CSS property that determines whether an element should be treated as a block or an inline element. This property defines the display of different parts of the web page. Bootstrap display property responsively toggles the value of display components. There are several display utility classes to enhance the web components.
Display Notation
The value of the display property can be changed with responsive display utility classes. The display utility classes can be applied to all breakpoints, from xs to XXL, and do not require any breakpoint abbreviation in them. This is because the classes are applied from min-width:0; and up. The remaining breakpoints do require abbreviation. The notation used for classes are
- .d-{value} for xs
- .d-{breakpoint}-value for {sm, md, lg, xl, xxl}.
Where Value can be from one of the following.
Bootstrap Display Values
The following are display value along with its property
| Value |
Property |
| none |
Turns off the display of an element s. |
| block |
The element generates the block element box with line breaks before and after the element in the normal flow. |
| inline |
The element generates one or more inline element boxes without any line break before and after them. |
| inline-block |
It is used to display an element as an inline-level block container. |
| grid |
It is used to display an element as a block-level grid container. |
| table |
It is used to display an element as a block-level table. |
| table-cell |
It is used to set behavior as <td> for all elements. |
| table-row |
It is used to set the display behavior as <tr> for all the elements. |
| flex |
It is used to display an element as a block-level flex container. |
| inline-flex |
It is used to display an element as an inline-level flex container |
Example: Creating a block and inline display element
Here, we have shown you two different types of display. The first one is .d-inline elements and the second one is .d-block display elements. Along with the display utility, we have also used some background colors and spacing.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h4> Inline elements </h4>
<div class="d-inline m-2 p-2 bg-secondary ">inline</div>
<div class="d-inline m-2 p-2 bg-secondary ">inline</div>
<h4> Block level elements </h4>
<div class="d-block m-2 p-2 bg-secondary ">block</div>
<div class="d-block m-2 p-2 bg-secondary">block</div>
</body>
</html>
Output:
Hiding Element
Bootstrap provides you an interactive way to hide or show elements according to the size of the devices. And you don't have to waste your time writing codes for different devices. Bootstrap provides this with the help of its responsive display classes.
To simply hide elements use .d-none class or use .d-breakpoint-none {sm, md, lg, xl, xxl} classes for any responsive variations screen.
Here is the list of classes used for showing or hiding elements for more than one screen size.
Bootstrap Display Hide Classes
List of classes to hide and show elements for different screen sizes.
| screen size |
class |
| Hidden on all |
.d-none |
| Hidden on xs screen |
.d-none .d-sm-block |
| Hidden only on small(sm) screen |
.d-sm-none .d-md-block |
| Hidden only on medium(md) screen |
.d-md-none .d-md-block |
| Hidden only on large(lg) screen. |
.d-lg-none .d-md-block |
| Hidden only on extra large(xl) screen. |
.d-xl-none .d-md-block |
| Hidden only on extra extra large(xxl) screen. |
.d-xxl-none .d-md-block |
| Visible on all screen |
.d-block |
| visible only on xs screen |
.d-block .d-sm-none |
| visible only on sm screen |
.d-none .d-sm-block .d-md-none |
| visible only on md screen |
.d-none .d-md-block .d-lg-none |
| visible only on lg screen |
.d-none .d-lg-block .d-xl-none |
| visible only on xl screen |
.d-none .d-xl-block .d-xxl-none |
| visible only on xxl screen |
.d-none .d-xxl-block |
Example: Hiding and showing elements responsively.
Here we have taken two responsive display classes. The .d-lg-none class hides elements on a larger screen whereas .d-none d-lg-block hides the element on a smaller screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="d-lg-none bg-info">hide on lg and wider screens</div>
<div class="d-none d-lg-block bg-secondary">hide on screens smaller than lg</div>
</body>
</html>
Output:
Here is the output of the above code. In the picture, the first output is shown as we are using a large-size screen whereas the second one does not appear.
Display in Print
The display values can be changed while printing the document. The print value can be changed using the print display utility class. Here is the list of display print classes.
- .d-print-none
- .d-print-block
- .d-print-inline
- .d-print-flex
- .d-print-table
- .d-print-inline-block
- .d-print-table-row
- .d-print-table-cell
- .d-print-grid
- .d-print-inline-flex
Example: Combining display print classes with display classes
In this program, we have combined the display class with the display print class. Use .d-print-none class to hide the element while printing. Use .d-none d-print-block class to hide element on screen. Use d-none d-lg-block d-print-block class to hide the element for a large screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<div class="d-print-none bg-secondary">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block bg-secondary">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block bg-secondary">Hide up to large on screen, but always show on print</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So now we can easily customize the display property using Bootstrap 5. There are various display utility classes available in bootstrap which can be used to set values of different components responsively. Bootstrap also provides us with print classes that can be used to set the display property of print values.
