Commit b69d5358 authored by Andrew Murphy's avatar Andrew Murphy Committed by GitHub
Browse files

formatting

parent 8504f688
7 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25494web pack,!25326Adjust examples,!24424#24373 : Documentation/Utility/Display,!23207#22402 : modal: new autofocus & keyboardBtnNav options,!17021v4
Showing with 17 additions and 17 deletions
+17 -17
...@@ -51,22 +51,22 @@ For faster mobile-friendly development, use responsive display classes for showi ...@@ -51,22 +51,22 @@ For faster mobile-friendly development, use responsive display classes for showi
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 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 except 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 | | Screen Size | Class |
| --- | --- | | --- | --- |
| Hidden on all | `d-none` | | Hidden on all | `.d-none` |
| Hidden only on xs | `d-none d-sm-block` | | Hidden only on xs | `.d-none .d-sm-block` |
| Hidden only on sm | `d-sm-none d-md-block` | | Hidden only on sm | `.d-sm-none .d-md-block` |
| Hidden only on md | `d-md-none d-lg-block` | | Hidden only on md | `.d-md-none .d-lg-block` |
| Hidden only on lg | `d-lg-none d-xl-block` | | Hidden only on lg | `.d-lg-none .d-xl-block` |
| Hidden only on xl | `d-xl-none` | | Hidden only on xl | `.d-xl-none` |
| Visible on all | `d-block` | | Visible on all | `.d-block` |
| Visible only on xs | `d-block d-sm-none` | | Visible only on xs | `.d-block .d-sm-none` |
| Visible only on sm | `d-none d-sm-block d-md-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 md | `.d-none .d-md-block .d-lg-none` |
| Visible only on lg | `d-none d-lg-block d-xl-none` | | Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
| Visible only on xl | `d-none d-xl-block` | | Visible only on xl | `.d-none .d-xl-block` |
{% example html %} {% example html %}
<div class="d-lg-none">hide on screens wider than lg</div> <div class="d-lg-none">hide on screens wider than lg</div>
...@@ -79,10 +79,10 @@ Change the `display` value of elements when printing with our print display util ...@@ -79,10 +79,10 @@ Change the `display` value of elements when printing with our print display util
| Class | Print style | | Class | Print style |
| --- | --- | | --- | --- |
| `.d-print-block` | Applies `display: block` to the element when printing | | `.d-print-block` | Applies `display: block;` to the element when printing |
| `.d-print-inline` | Applies `display: inline` to the element when printing | | `.d-print-inline` | Applies `display: inline;` to the element when printing |
| `.d-print-inline-block` | Applies `display: inline-block` to the element when printing | | `.d-print-inline-block` | Applies `display: inline-block;` to the element when printing |
| `.d-print-none` | Applies `display: none` to the element when printing | | `.d-print-none` | Applies `display: none;` to the element when printing |
The print and display classes can be combined. The print and display classes can be combined.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment