Bootstrap v4 explained: Display utilities, the new hiding and showing

When you browse through the #help channel on the Bootstrap Slack workspace, you will see a few questions being asked over and over again. In this series I will try and answer these questions thoroughly in the hopes you will understand what techniques are used and how to use it properly.

This article will show you how to use the new display utilities to hide and show like you did in v3. We’ll also walk through the styles the classes add.
You can read through the documentation on getbootstrap.com.

If you just want to know how to use it, scroll down till the next three dots.

Techniques

The display utilities are actually really easy to explain, as long as you know how the display property works. If you don’t, you can read up on the below links. Do note that not every value explained on these links are supported.

• https://css-tricks.com/almanac/properties/d/display/
• https://developer.mozilla.org/en-US/docs/Web/CSS/display

With Sass it is a breeze to create these classes and doesn’t take a lot of lines of code ( 38 to be exact, including comments). I’ll dig into the used functions a bit more than the previous article, otherwise it would be to easy 😉. For the developers that are concerned about print, Bootstrap’s got ya covered.

Web

For the web we start off with creating a loop to create classes per breakpoint.

@each $breakpoint in map-keys($grid-breakpoints) {
  ...
}

This loops through every defined breakpoint in the $grid-breakpoints Sass map and passes it through as $breakpoint.

The next step is actually creating the media query. For this we use a mixin called media-breakpoint-up().

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    
    ...
  }
}

This creates the media query using the passed on $breakpoint. to be able to use actually create the corresponding classes an $infix variable is created with the function breakpoint-infix() that uses the active $breakpoint and returns the computed value for the infix.

@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { 
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

These two functions actually do the magic to get the infix, this is used for every utility, grid column or any other element that uses any breakpoint class.
breakpoint-min() uses a $name ( the active $breakpoint ) and gets the corresponding pixel value from the $grid-breakpoints. This value is stored as the variable $min. If the value of $min is not 0, it returns that pixel value. If value is 0 it returns null.
$breakpoint-infix() uses $name ( the active $breakpoint ) and the $grid-breakpoints map to determine what should be used as the infix. If the function breakpoint-min() returns null itself will return an empty string. So for the xs breakpoint we had in v3, you can now leave out the infix to get the same result, ie.: .col-xs-12 can now be used as .col-12. For the other breakpoints that aren’t 0 it will spit out a computed value of the breakpoint name that is prefixed with a dash "-#{$name}".

In the next part we actually define the classes. The display properties that are supported are: block, inline, inline-block, table, table-row, table-cell, flex and inline flex.

...
    .d#{$infix}-none         { display: none !important; }
    .d#{$infix}-inline       { display: inline !important; }
    .d#{$infix}-inline-block { display: inline-block !important; }
    .d#{$infix}-block        { display: block !important; }
    .d#{$infix}-table        { display: table !important; }
    .d#{$infix}-table-row    { display: table-row !important; }
    .d#{$infix}-table-cell   { display: table-cell !important; }
    .d#{$infix}-flex         { display: flex !important; }
    .d#{$infix}-inline-flex  { display: inline-flex !important; }
...

As you can see these utilities start with a d, for display, next the infix and then the value used. As these classes should overwrite any used display property on the element it is used on, it has an !important flag.

Print

The display properties for print aren’t built with media queries per breakpoint, but only the @media print {...} one. As we now don’t need to infix these classes these are just defined as is. The supported values are the same.

@media print {
  .d-print-none         { display: none !important; }
  .d-print-inline       { display: inline !important; }
  .d-print-inline-block { display: inline-block !important; }
  .d-print-block        { display: block !important; }
  .d-print-table        { display: table !important; }
  .d-print-table-row    { display: table-row !important; }
  .d-print-table-cell   { display: table-cell !important; }
  .d-print-flex         { display: flex !important; }
  .d-print-inline-flex  { display: inline-flex !important; }
}

Using the classes

Here is the difficult part of theses utilities, and the reason for this article. Since v4 the classes .hidden-[breakpoint]-[value] and .visible-[breakpoint]-[value] were dropped. Understanding which display utilities to use to replace which old classes can be a bit confusing. Here we go.

Mobile first

As the classes are created using the media-breakpoint-up() mixin, we have to think from mobile and upward. So starting with a viewport width of 0, we have d-[value]. This will overwrite the elements value for display on every screen size. If we go one up, so sm, this will overwrite the elements value for display on all the screens sizes above 576px. For example if we use d-sm-none it will be visible on devices than are smaller than 576px, but hidden on devices wider than 576px.

The main difference is that the class doesn’t overwrite it for that specific breakpoint, but from that breakpoint upward. People that have used the alpha versions of v4 might be looking for .hidden-md-down, these have been dropped and it only works upward.
Simply said: The classes set a starting point and are used going upward.
If you combine the classes together those starting points are overwritten again going upward.

Got that? Hope so…

What replaces…?

The documentation has a table describing what classes to use in what case. To most people this is clear enough, some just wan’t a simple cheatsheet. Actually, who doesn’t want that. So here you go:

Replace [value] with one of the supported values and you’re good to go. Most commonly block.

You can be even more thorough and add the class for each breakpoint, but these will do the same trick. If you can’t seem to figure it out until this point I would advice doing that. If we add it to a div it would look something like this.

<div class="d-block d-sm-block d-md-block d-lg-block d-xl-block">
</div>

Using this method you have full control over how it’s being displayed on each breakpoint. If you have your desired display settings you can then try and simplify the classes. If the next on is the same, you can get rid of it. For example if you end up with:

d-flex d-sm-flex d-md-flex d-lg-none d-xl-flex

You can drop the sm and md class as it will inherit it from the starting point d-flex, the setting changes to none on the lg breakpoint and changes back to flex on xl. You will end up with:

d-flex d-lg-none d-xl-flex

using these steps you will end up with your desired class list to show and hide your elements.

Open this codepen in a new tab and scale your window to see the magic.

Try them out and you’ll start to love them. I know I do.

Thanks for reading, hope you learned something.
Let me know what you want explained next, i’ll be glad to do it.