Signup/Sign In

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.

Display print class

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.



About the author: