Display (Hiding Elements) - pressden/emma GitHub Wiki

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