hub.eb?material_id=459&track_id=468

Responsive Display Properties


The CSS display property can be changed responsively using Bootstrap utility classes at any breakpoint. These classes include:

  • d-{bp}-none – is used to hide an element for all screen sizes greater than the breakpoint value.
  • d-{bp}-block – displays the element as a block element for all screen sizes greater than the breakpoint value.
  • d-{bp}-flex – is used to make an element a flex container for all screen sizes greater than the breakpoint value.
  • d-{bp}-inline – displays the element as an inline element for all screen sizes greater than the breakpoint value.

The breakpoints are optional and if no breakpoint is used it applies the utility class for the smallest screen size and upwards.

To show an element for a specific selection of screen sizes you can combine the use of the d-{bp}-none and d-{bp}-block classes.

e.g. class=d-none d-md-block d-xl-none will show the element on medium and large screens and hide it on all other sized screens.

Current Module

Related