#24373 : Documentation/Utility/Display#24424
#24373 : Documentation/Utility/Display#24424mdo merged 5 commits intotwbs:v4-devfrom aavmurphy:v4-dev
Conversation
The most important change is to say "for the named breakpoint ( `sm`, `md`, `lg`, `xl`) and above". The existing "hiding elements para" (not yet live) is exactly what's needed. Keep simple for "english as a second language" people (e.g. hide not hidden)
aavmurphy
changed the title
| --- | ||
|
|
||
| ## Common `display` values | ||
| ## How it Works |
There was a problem hiding this comment.
We sentence case headings—## How it works.
There was a problem hiding this comment.
i'll get the hang of it ... :)
| ## How it Works | ||
|
|
||
| The [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) accepts a handful of values and we support many of them with utility classes. We purposefully don't provide every value as a utility, so here's what we support: | ||
| Change the `display` value of elements with our responsive-friendly display utility classes. |
There was a problem hiding this comment.
This sentence, the following paragraph, and the last paragraph under notation should be combined.
Change the value of the
displayproperty with our responsive display utility classes. We purposely support only a subset of all possible values fordisplay. Classes can be combined for various effects as you need.
Markdown for copy-pasting:
Change the value of the [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with our responsive display utility classes. We purposely support only a subset of all possible values for `display`. Classes can be combined for various effects as you need.
| Put them to use by applying any of the classes to an element of your choice. For example, here's how you could use the inline, block, or inline-block utilities (the same applies to the other classes). | ||
| ## Notation | ||
|
|
||
| The classes are named using the format |
There was a problem hiding this comment.
Let's use the same approach from the Spacing docs. Also, always include a line between paragraphs and always use punctuation.
Display utility classes that apply to all breakpoints, from
xstoxl, have no breakpoint abbreviation in them. This is because those classes are applied frommin-width: 0and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.As such, the classes are named using the format
.d-{value}forxsand.d-{breakpoint}-{value}forsm,md,lg, andxl.
Markdown for copy-pasting:
Display utility classes that apply to all breakpoints, from `xs` to `xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format `.d-{value}` for `xs` and `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
There was a problem hiding this comment.
still like mine, but compromised with bullet points to make it stand out for newbies.
| * `flex` | ||
| * `inline-flex` | ||
|
|
||
| For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint. |
There was a problem hiding this comment.
- When writing classes, use the
.in the beginning. - When writing
property: value;, use a space and trailing;. - When using the breakpoint shorthand (e.g., "lg"), write it with backticks to render it as code:
lg.
There was a problem hiding this comment.
got you. moved the (this breakpoint or wider) emphasis to here
its what confused me at first, the layout/overview/#breakpoints page only mentions xs in a comment, so i hadn't noticed it
|
|
||
| For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint. | ||
|
|
||
| Combine these classes to get the effect you need. |
| | Visible only on xl | `d-none d-xl-block` | | ||
|
|
||
| {% example html %} | ||
| <div class="d-lg-none">hide on screens wider than lg</div> |
There was a problem hiding this comment.
Capitalize h in hide on these two lines
| The print and display classes can be combined. | ||
|
|
||
| {% example html %} | ||
| <div class="d-print-none">Screen Only (hide on print)</div> |
|
|
||
| {% example html %} | ||
| <div class="d-print-none">Screen Only (hide on print)</div> | ||
| <div class="d-none d-print-block">Print Only (hide on screen)</div> |
| {% example html %} | ||
| <div class="d-print-none">Screen Only (hide on print)</div> | ||
| <div class="d-none d-print-block">Print Only (hide on screen)</div> | ||
| <div class="d-none d-lg-block d-print-block">(lg or wider) screen and print only. Hide on smaller than lg screen.</div> |
There was a problem hiding this comment.
Change text to Hide up to large on screen, but always show on print
|
@mdo |
2 participants
Use the template from utility=spacing
The most important change is to say the various .d-lg-inline classes work "for the named breakpoint (
sm,md,lg,xl) and above".The existing "hiding elements para" (not yet live) is exactly what's needed.
Keep simple for "english as a second language" people (e.g. hide not hidden)
Printing: Add print-only and screen-only example