rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

suggested changes

Browse Source
This commit is contained in:
Andrew Murphy 2017-10-19 21:14:08 +01:00 committed by GitHub
parent 5114a4758d
commit d578117c73
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
docs/4.0/utilities/display.md
View File

@ -6,17 +6,17 @@ group: utilities
toc: true toc: true
--- ---
## How it Works ## How it works
Change the `display` value of elements with our responsive-friendly display utility classes. 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.
The [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) property accepts lots of values, and we support many of them with utility classes. We purposefully don't provide them all.
## Notation ## Notation
The classes are named using the format Display utility classes that apply to all [breakpoints]({{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/#responsive-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.
* `d-{display}` - for all content
* `d-{breakpoint}-{display}` - ** for the named breakpoint ( `sm`, `md`, `lg`, `xl`) and above.** As such, the classes are named using the format:
* `.d-{value}` for `xs`
* `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
Where *display* is one of: Where *display* is one of:
@ -29,9 +29,9 @@ Where *display* is one of:
* `flex` * `flex`
* `inline-flex` * `inline-flex`
For example, `d-lg-none` sets `display:none` on screens larger than the lg breakpoint. The media queries effect screen widths with the given breakpoint *or larger*.
Combine these classes to get the effect you need. For example, `.d-lg-none` sets `display: none;` on both `lg' and `xl` screens.
## Examples ## Examples
@ -87,7 +87,7 @@ Change the `display` value of elements when printing with our print display util
The print and display classes can be combined. The print and display classes can be combined.
{% example html %} {% example html %}
<div class="d-print-none">Screen Only (hide on print)</div> <div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (hide on screen)</div> <div class="d-none d-print-block">Print Only (Hide on screen only)</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> <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
{% endexample %} {% endexample %}