diff options
| author | Rami Yushuvaev <[email protected]> | 2017-09-07 14:23:20 +0300 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-09-09 17:43:12 -0700 |
| commit | 65cb97b3d6fdb245e521efabc565945918012e09 (patch) | |
| tree | e4449cfb21dc5c4fc6b62ccb20b2a2c5ac5d2b1d /docs | |
| parent | 256c539e26abb39f711da25b540b7a8d972295a9 (diff) | |
| download | bootstrap-65cb97b3d6fdb245e521efabc565945918012e09.tar.xz bootstrap-65cb97b3d6fdb245e521efabc565945918012e09.zip | |
Add an introduction and a table with examples
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/utilities/display.md | 19 |
1 files changed, 18 insertions, 1 deletions
diff --git a/docs/4.0/utilities/display.md b/docs/4.0/utilities/display.md index 6f8142b7e..bfb7f091e 100644 --- a/docs/4.0/utilities/display.md +++ b/docs/4.0/utilities/display.md @@ -49,9 +49,26 @@ Responsive variations also exist for every single utility mentioned above. ## Hiding Elements +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 element responsively for each screen size. + To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl}-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 `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes but it will shows it only on medium and large devices. +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 `.d-none.d-md-block.d-xl-none` will hide the element for all screen sizes except on medium and large devices. + +| 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` | +| 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` | ## Display in print |