Let's look at the display features with bootstrap, which is the most popular one of the frameworks when the subject is responsive web design.

In order to understand the architecture of the display options of bootstrap, let’s check breakpoints.

Breakpoints are the exact width pixel values that decide the screen size of the browser.

Table 1: Dimensions regarding the screen size.

Bootstrap Source Link

You can check the breakpoints in the table above. Those dimensions mean that if you are under 576px it means that your screen size is x-small, if your width pixel is higher than 576px it means that your screen size is small (until you reach 769 px), and it continues like this.

Since Bootstrap developers used min-width property of CSS while adding those breakpoints, if you only apply a display property to a small screen, it works on both small and larger screens rather than working only on small screens.

Bootstrap min-width

This means that; if you add d-lg-flex to a class, flexbox property will be applied to lg, xl, and xxl screen sizes.

In Bootstrap there is a display property called none.

If you add a class named d-none to your element it will not show it.

So if you want to hide something only on small devices, we need to assign two display classes to the HTML element.

For example, you want to use a flex display property on the container:

<div class= container d-flex> … </div>

This d-flex property will affect the all kind of screen sizes since it has no screen class infix (check Table-1). It means that you are applying that property to x-small and larger screens.

What if we want to hide something in x-small and small screens?

So now, we want to “hide” the container unless it is a medium or larger screen.

<div class= container d-none d-md-flex> … <div>

In this case, d-md-flex property will override the d-none property after screen size reaches 769px ( which is breakpoint of medium screen)

What if we want to display something on small screens but not on large screens?

In this situation, unless it is a medium screen, we want to show it as flex. If it is a medium or larger screen, we want it to be hidden.

<div class= container d-flex d-md-none> … <div>

In the code above, you may see that “d-flex” property will be applied to whole screen types unless it reaches the medium screen. Since “d-md-none” will affect medium or larger screens, you will be able to hide container for those screens.

If you want to apply different display properties for every different screen sizes, it means that you need to add individually display properties with all breakpoint class infixes.

I hope that helped. Drop a like and share it if you found it informative.

Have a good day, meet you in the next blog!