”;
This chapter discusses about the display property of the Bootstrap.
In Bootstrap, the display property is used to control the visibility and behavior of elements. It allows you to define how an element should be rendered and positioned within the document layout.
Notation
-
Utility classes that are applicable to all breakpoints, ranging from xs to xxl, do not have any abbreviation for breakpoints.
-
These classes are implemented from a min-width: 0; and beyond and not restricted by media query.
-
The remaining breakpoints do contain an abbreviation for the breakpoint.
Following format is used in naming the display classes:
-
.d-{value} for xs, such as .d-none.
-
.d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets display: none; on lg, xl, and xxl screens.
{value} can be one of the following:
-
none
-
inline
-
inline-block
-
block
-
grid
-
inline-grid
-
table
-
table-cell
-
table-row
-
flex
-
inline-flex
Some of the values display property take, are as follows:
-
.d-none: This value hides the element completely, making it invisible and not taking up any space in the layout.
-
.d-inline: This value makes the element behave like an inline element, allowing other elements to be displayed alongside it on the same line.
-
.d-block: This value makes the element behave like a block-level element, causing it to start on a new line and take up the full available width.
-
.d-inline-block: This value combines the characteristics of both inline and block elements. The element is displayed inline, allowing other elements to be displayed alongside it.
Let us see an example of .d-inline:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-3 p-5">
<div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div>
<div class="d-inline p-4 text-bg-warning">d-inline - warning</div>
</div>
</body>
</html>
Let us see an example of .d-block:
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Display - block</h4>
<span class="d-block p-4 text-bg-info">d-block used for info</span>
<span class="d-block p-4 text-bg-primary">d-block used for primary</span>
</div>
</body>
</html>
Hide elements
In order to hide elements, use the .d-none class or one of the .d-{sm, md, lg, xl, xxl} classes.
| Screen size | Class |
|---|---|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none and .d-sm-block |
| Hidden only on sm | .d-sm-none and .d-md-block |
| Hidden only on md | .d-md-none and .d-lg-block |
| Hidden only on lg | .d-lg-none and .d-xl-block |
| Hidden only on xl | .d-xl-none and .d-xxl-block |
| Hidden only on xxl | .d-xxl-none |
| Visible on all | .d-block |
| Visible on xs | .d-block and .d-sm-none |
| Visible on sm | .d-none .d-sm-block .d-md-none |
| Visible on md | .d-none .d-md-block .d-lg-none |
| Visible on lg | .d-none .d-lg-block .d-xl-none |
| Visible on xl | .d-none .d-xl-block .d-xxl-none |
| Visible on xxl | .d-none .d-xxl-block |
Let us see an example of hiding the display on screens smaller than lg:
Note: Kindly resize the screen in order to see the changed effect.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Hide - display</h4>
<!--Hide display on smaller than lg-->
<div class="d-lg-none bg-warning">Hide on lg (large) and wider screens</div>
<div class="d-none d-lg-block bg-info">Visible on screens smaller than xl (extra-large)</div>
</div>
</body>
</html>
Display in print
You can modify the display value of elements specifically for printing purposes using our print display utility classes. These classes offer support for the same display values as the responsive .d-* utilities.
Following are the list of utilities available for display in print:
-
.d-print-none
-
.d-print-inline
-
.d-print-inline-block
-
.d-print-block
-
.d-print-grid
-
.d-print-inline-grid
-
.d-print-table
-
.d-print-table-row
-
.d-print-table-cell
-
.d-print-flex
-
.d-print-inline-flex
display and print classes can be combined and used. Let us see an example:
Note: Kindly resize the screen in order to see the changed effect.
Example
You can edit and try running this code using the Edit & Run option.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container m-3 p-3">
<h4>Print - display</h4>
<!--display on print and hide on screen-->
<div class="d-none d-print-block bg-primary-subtle p-3">Hide on screen and display on print only</div>
<!--display on screen and hide on print-->
<div class="d-print-none bg-warning p-3">Hide on print and display on screen only</div>
<!--display upto large screen and show always on print-->
<div class="d-none d-lg-block d-print-inline bg-danger-subtle p-3">Always display on print and hide up to large screen</div>
</div>
</body>
</html>
”;