# Display helpers

# Display

Specify the elements display property. These classes can be applied to all breakpoints from xs to xl. When using a base class,.d-{value}, it is inferred to be .d-${value}-xs.

• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg and xl

The value property is one of:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up. For example, d-lg-flex will apply to lg and xl size screens.

# Visibility

Conditionally display an element based upon the current viewport. Breakpoint utility classes always apply from the bottom up. That means if you have .d-none, it will apply to all breakpoints. However, .d-md-none will apply to only md and up.

Additionally you can also display an element based upon the current viewport using lateral display helper classes. These classes can be applied using the following format hidden-{breakpoint}-{condition}

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

Additionally, media types can be targeted using the only condition. Both hidden-screen-only and hidden-print-only are currently supported.

# Display in print

You can also change the display property when printing.

• .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

Print utility classes can also be combined with none print display utilities.

# Accessibility