diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index ff46ae70d3..0bb714b0fa 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -15,7 +15,7 @@ - title: Overview - title: Grid - title: Media object - - title: Responsive utilities + - title: Utilities for layout - title: Content pages: @@ -56,8 +56,8 @@ - title: Clearfix - title: Close icon - title: Colors + - title: Display - title: Flexbox - - title: Display property - title: Image replacement - title: Invisible content - title: Position diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md deleted file mode 100644 index d1522e5586..0000000000 --- a/docs/layout/responsive-utilities.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -layout: docs -title: Responsive utilities -description: Use responsive display utility classes for showing and hiding content by device, via media query. -group: layout ---- - -For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed. - -Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Available classes - -* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. -* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports. -* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size. -* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. -* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Extra small devices - Portrait phones (<576px) - - Small devices - Landscape phones (≥576px - <768px) - - Medium devices - Tablets (≥768px - <992px) - - Large devices - Desktops (≥992px - <1200px) - - Extra large devices - Desktops (≥1200px) -
.hidden-xs-downVisibleVisibleVisibleVisible
.hidden-sm-downVisibleVisibleVisible
.hidden-md-downVisibleVisible
.hidden-lg-downVisible
.hidden-xl-down
.hidden-xs-up
.hidden-sm-upVisible
.hidden-md-upVisibleVisible
.hidden-lg-upVisibleVisibleVisible
.hidden-xl-upVisibleVisibleVisibleVisible
- -## Print classes - -Similar to the regular responsive classes, use these for toggling content for print. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassBrowserPrint
.visible-print-blockVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-printVisible
- -## Test cases - -Resize your browser or load on different devices to test the responsive utility classes. - -Green checkmarks indicate the element **is visible** in your current viewport. - -
-
- ✔ Visible on extra small - Extra small -
-
- ✔ Visible on small or narrower - Small or narrower -
-
- ✔ Visible on medium or narrower - Medium or narrower -
-
- ✔ Visible on large or narrower - Large or narrower -
-
- -
- -
-
- ✔ Visible on small or wider - Small or wider -
-
- ✔ Visible on medium or wider - Medium or wider -
-
- ✔ Visible on large or wider - Large or wider -
-
- ✔ Visible on extra large - Extra large -
-
- -
- -
-
- ✔ Your viewport is exactly extra small - Your viewport is NOT exactly extra small -
-
- ✔ Your viewport is exactly small - Your viewport is NOT exactly small -
-
- ✔ Your viewport is exactly medium - Your viewport is NOT exactly medium -
-
- -
-
- ✔ Your viewport is exactly large - Your viewport is NOT exactly large -
-
- ✔ Your viewport is exactly extra large - Your viewport is NOT exactly extra large -
-
diff --git a/docs/layout/utilities-for-layout.md b/docs/layout/utilities-for-layout.md new file mode 100644 index 0000000000..50f4ce3956 --- /dev/null +++ b/docs/layout/utilities-for-layout.md @@ -0,0 +1,21 @@ +--- +layout: docs +title: Utilities for layout +description: Use any of our dozens of responsive utility classes for showing, hiding, aligning, and spacing content. +group: layout +--- + +For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content. Below is a primer on what's included in Bootstrap and how these utilities can help you with layout. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Changing `display` + +## Flexbox options + +## Margin and padding + +## Toggle `visibility` diff --git a/docs/utilities/display-property.md b/docs/utilities/display-property.md deleted file mode 100644 index 50ea293673..0000000000 --- a/docs/utilities/display-property.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -layout: docs -title: Display property -group: utilities ---- - -Use `.d-block`, `.d-inline`, or `.d-inline-block` to simply set an element's [`display` property](https://developer.mozilla.org/en-US/docs/Web/CSS/display) to `block`, `inline`, or `inline-block` (respectively). - -To make an element `display: none`, use our [responsive utilities]({{ site.baseurl }}/layout/responsive-utilities/) instead. - -{% example html %} -
Inline
-
Inline
-{% endexample %} - -{% example html %} -Block -{% endexample %} - -{% example html %} -
-

inline-block

- Boot that strap! -
-
-

inline-block

- Strap that boot! -
-{% endexample %} diff --git a/docs/utilities/display.md b/docs/utilities/display.md new file mode 100644 index 0000000000..27f70e0b2a --- /dev/null +++ b/docs/utilities/display.md @@ -0,0 +1,64 @@ +--- +layout: docs +title: Display property +group: utilities +--- + +Quickly and responsively toggle the `display` value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling `display` when printing. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Common `display` values + +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: + +- `.d-none` +- `.d-inline` +- `.d-inline-block` +- `.d-block` +- `.d-table` +- `.d-table-cell` +- `.d-flex` +- `.d-inline-flex` + +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). + +{% example html %} +
d-inline
+
d-inline
+{% endexample %} + +{% example html %} +d-block +{% endexample %} + +{% example html %} +
d-inline-block
+
d-inline-block
+{% endexample %} + +Responsive variations also exist for every single utility mentioned above. + +{% for bp in site.data.breakpoints %} +- `.d{{ bp.abbr }}-none` +- `.d{{ bp.abbr }}-inline` +- `.d{{ bp.abbr }}-inline-block` +- `.d{{ bp.abbr }}-block` +- `.d{{ bp.abbr }}-table` +- `.d{{ bp.abbr }}-table-cell` +- `.d{{ bp.abbr }}-flex` +- `.d{{ bp.abbr }}-inline-flex`{% endfor %} + +## Display in print + +Change the `display` value of elements when printing with our print display utilities. + +| Class | Print style | +| --- | --- | +| `.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-block` | Applies `display: inline-block` to the element when printing | +| `.d-print-none` | Applies `display: none` to the element when printing |