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.
- To hide elements simply use the
.d-noneclass. - Or one of the
.d-{sm,md,lg,xl,xxl}-noneclasses 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
- 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-blockIf you want to show any element only on sm (small) device then use this.
.d-none .d-md-none .d-sm-block| Screen size | Class |
|---|---|
| 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
Tip.d-print-none
/
Source : Hide Element
