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 Bootstrap Display 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.

Bootstrap 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:

Bootstrap 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

Bootstrap 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.

CSS Display

When it comes to layout, display property holds a crucial place in CSS. If break it to the bare essentials, display property simply specifies how the element will be displayed. The default value for this property varies (either block or inline) element to element.

We will now take a look at the possible values for this property and the elements associated with them.
The possible values for display property are:

  • block-level
  • inline
  • none

block-level

If an element is block-level it is bound to start on a new line. It takes up all the available width by stretching up on both the sides horizontally.
Following are some block-level elements:
• <div>
• <h1> – <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

inline

So, the phrase “in line” is what sums up the working of these type of elements. Inline elements stay in the same line and thus take up only the necessary space instead of stretching out to take the whole width.
Following are some popularly used inline elements:

  • <span>
  • <a>
  • <img>

none

When given the value ‘none’display property hides the element. This is generally done with some javascript code or some other CSS rule to make the element hide and appear at specific situations.

Override the Default Display Value

So now we know the permissible values for the display property and also the elements that have these values set by default. But these default values can be overridden if required. For eg. the <li> tag is block type by default but can be changed to inline for horizontal menus.

The point to be noted here is that the changing of the display value will only change how the elements are displayed on the screen and not their type. So, even if an inline element is set for inline display, it cannot contain other elements like an actual block type element.