Display

The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.

Visibility

Conditionally display an element based upon the current viewport. These classes can be applied using the following format hidden-{breakpoint}-{condition}

The breakpoint sets the viewport size:

  • xs - extra small devices

  • sm - small devices

  • md - medium devices

  • lg - large devices

  • xl - extra large

The condition applies the class base on:

  • only - hide the element only on xs through xl breakpoints

  • and-down - hide the element on the specified breakpoint and down sm through lg breakpoints

  • and-up - hide the element on the specified breakpoint and up sm through lg breakpoints

Overflow

Set the overflow for an element with overflow-{axis}-hidden or simply overflow-hidden.

  • overflow-hidden - hide overflow on both the x and y axis

  • overflow-y-hidden - hide overflow on the y axis

  • overflow-x-hidden - hide overflow on the x axis

Display

Specify the elements display property. These classes can be applied using the following format d-{display}.

  • d-inline-flex - sets the element display property to inline-flex

  • d-flex - sets the element display property to flex

  • d-inline-block - sets the element display property to inline-block

  • d-block - sets the element display property to block

  • d-inline - sets the element display property to inline

  • d-none - sets the element display property to none

Examples

Resize your screen to see the elements conditionally hide.