Display (Hiding Elements)

Our display utility classes exist to allow hiding of elements at various browser widths. The most common application of this will be hiding a large image or icon when on mobile, where it might otherwise look awkward or take up too much space.

• d-none - hides element in all cases
• d-none-xl-down - hides element when browser width is narrower than 1280px
• d-none-lg-down - hides element when browser width is narrower than 960px
• d-none-md-down - hides element when browser width is narrower than 782px
• d-none-sm-down - hides element when browser width is narrower than 600px
• d-none-xs-down - hides element when browser width is narrower than 480px
• d-none-xl - hides element when browser width is wider than 1280px
• d-none-lg - hides element when browser width is wider than 960px
• d-none-md - hides element when browser width is wider than 782px
• d-none-sm - hides element when browser width is wider than 600px
• d-none-xs - hides element when browser width is wider than 480px