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:
1 2 3 4 5 | <div class="d-inline p-2 bg-primary text-white">d-inline</div> <div class="d-inline p-2 bg-dark text-white">d-inline</div> <span class="d-block p-2 bg-primary text-white">d-block</span> <span class="d-block p-2 bg-dark text-white">d-block</span> |
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,
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
1 2 | <div class="d-lg-none">hide on screens wider than lg</div> <div class="d-none d-lg-block">hide on screens smaller than lg</div> |
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.