Showing and hiding elements by device using bootstrap

For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide elements responsively for each screen size.

  1. To hide elements simply use the .d-none class.
  2. Or one of the .d-{sm,md,lg,xl,xxl}-none classes for any responsive screen variation.

To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class. For example

  1. If you want to show element all device other than small and extra small device then you can use above combination like this.
.d-none .d-md-block

If you want to show any element only on sm (small) device then use this.

.d-none .d-md-none .d-sm-block
Screen sizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
Hidden only on xl.d-xl-none .d-xxl-block
Hidden only on xxl.d-xxl-none
Visible on all.d-block
Visible only on xs.d-block .d-sm-none
Visible only on sm.d-none .d-sm-block .d-md-none
Visible only on md.d-none .d-md-block .d-lg-none
Visible only on lg.d-none .d-lg-block .d-xl-none
Visible only on xl.d-none .d-xl-block .d-xxl-none
Visible only on xxl.d-none .d-xxl-block

If you want to hide something while printing then you can use this class .d-print-none



Source : Hide Element

Leave a Reply