rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Code Issues Actions Packages Releases Activity
d5e153eac8
Bootstrap/docs/layout/responsive-utilities.md
Mark Otto 7bf868a709 v4: Social meta tags (#20825) 
* descriptions for getting started pages

* descriptions for layout

* add content page descriptions

* more descriptions, updates to some existing ones

* correct site url

* add social stuff to config for twitter cards

* add twitter meta tags; use large image for homepage and regular card for all others

* add the assets

* more site config

* more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements
2016-10-02 18:19:47 -07:00

9.4 KiB
Raw Blame History

layout title description group
docs Responsive utilities Use responsive display utility classes for showing and hiding content by device, via media query. 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.

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 (<544px) Small devices Landscape phones (≥544px - <768px) Medium devices Tablets (≥768px - <992px) Large devices Desktops (≥992px - <1200px) Extra large devices Desktops (≥1200px)
.hidden-xs-down Hidden Visible Visible Visible Visible
.hidden-sm-down Hidden Hidden Visible Visible Visible
.hidden-md-down Hidden Hidden Hidden Visible Visible
.hidden-lg-down Hidden Hidden Hidden Hidden Visible
.hidden-xl-down Hidden Hidden Hidden Hidden Hidden
.hidden-xs-up Hidden Hidden Hidden Hidden Hidden
.hidden-sm-up Visible Hidden Hidden Hidden Hidden
.hidden-md-up Visible Visible Hidden Hidden Hidden
.hidden-lg-up Visible Visible Visible Hidden Hidden
.hidden-xl-up Visible Visible Visible Visible Hidden

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

Class Browser Print
.visible-print-block Hidden Visible
(as display: block)
.visible-print-inline Hidden Visible
(as display: inline)
.visible-print-inline-block Hidden Visible
(as display: inline-block)
.hidden-print Visible Hidden

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