Bootstrap Display

Bootstrap’s display properties can help you toggle the display of your web-page components quickly and responsively.

Bootstrap provides support for most of the common display features along with some extra features of its own

How it works

The value of the display property can be changed using the utility classes provided by Bootstrap.

These classes ensure responsive display for the variety of devices.

Only a subset of the possible display values is kept, on purpose.

The available classes can be used together for different effects required by the developers.

Notation

Bootstrap doesn’t have any breakpoint abbreviation in the utility classes that are applicable to the different breakpoints ranging from xs to xl.

The reason being, these classes are applicable from the min-width value as 0 and upwards.

Therefore, they are not bound by any media query. However, there are breakpoint abbreviations available for the remaining breakpoints.

So basically, the following formats can be used to name these classes:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

The ‘value’ here is replaceable with any of the following:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

All the media queries are effective for screen widths with the given breakpoint or larger. See the code below for more understanding:

Hiding elements

The showing and hiding of elements, especially for small devices like a mobile phone, should be controlled by using the responsive display classes.

This is a mobile-friendly approach and saves time and efforts on recreating the websites for each screen size.

The elements can be hidden by using the .d-none class. You can use one of the .d-{sm,md,lg,xl}-none classes for as per the requirement for responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one The .d-*-none class can be combined with a .d-*-* class for showing the elements on given intervals of screen sizes.

For instance, you can combine .d-none .d-md-block and .d-xl-none to hide the element for all screen sizes but the medium and large devices.

Here’s a list of combinations that you can use for hiding the elements on different screens:

  • .d-none: Hidden on all
  • .d-none .d-sm-block: Hidden only on xs
  • .d-sm-none .d-md-block: Hidden only on sm
  • .d-md-none .d-lg-block: Hidden only on md
  • .d-lg-none .d-xl-block: Hidden only on lg
  • .d-xl-none: Hidden only on xl
  • .d-block: Visible on all
  • .d-block .d-sm-none: Visible only on xs
  • .d-none .d-sm-block .d-md-none: Visible only on sm
  • .d-none .d-md-block .d-lg-none: Visible only on md
  • .d-none .d-lg-block .d-xl-none: Visible only on lg
  • .d-none .d-xl-block: Visible only on xl

The code below, illustrates how to hide element for screens smaller than lg

Display in print

The utility classes for display print are as following:

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

You can combine print and display classes too.