metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="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."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Display and visibility - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Common</a></li> <li class="toc-entry"><a href="#_display">Display</a></li> <li class="toc-entry"><a href="#_display_touch">Touch or not touch</a></li> <li class="toc-entry"><a href="#_visibility">Visibility</a></li> <li class="toc-entry"><a href="#_print">Print</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Display and Visibility</h1> <p class="text-leader"> 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. </p>  <h3 id="_display">Display</h3> <p> The display property 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: </p> <ul> <li><code>.d-none</code></li> <li><code>.d-block</code></li> <li><code>.d-inline</code></li> <li><code>.d-inline-block</code></li> <li><code>.d-table</code></li> <li><code>.d-table-row</code></li> <li><code>.d-table-cell</code></li> <li><code>.d-flex</code></li> <li><code>.d-inline-flex</code></li> </ul> <p> 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). </p> <div class="example pt-3 pb-3"> <div class="d-inline p-2 bg-green fg-white">d-inline</div> <div class="d-inline p-2 bg-yellow fg-dark">d-inline</div> <div class="d-inline p-2 bg-red fg-white">d-inline</div> </div> <pre class=""><code> <div class="d-inline">d-inline</div> <div class="d-inline">d-inline</div> <div class="d-inline">d-inline</div> </code></pre> <p> Responsive variations also exist for every single utility mentioned above with specify suffix. </p> <ul> <li><code>.d-none-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-block-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-inline-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-inline-block-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-table-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-table-row-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-table-cell-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-flex-[sm | md | lg | xl | xxl]</code></li> <li><code>.d-inline-flex-[sm | md | lg | xl | xxl]</code></li> </ul> <p class="text-small text-muted"> * Remember! Responsive utilities works with <code>min-width</code> option. </p> <h3 id="_display_touch">Touch & no-Touch</h3> <p> You can specify display property depending on the touch or not touch device. To specify this behavior use classes: </p> <h6>For touch</h6> <ul> <li><code>.d-none-touch</code></li> <li><code>.d-block-touch</code></li> <li><code>.d-inline-touch</code></li> <li><code>.d-inline-block-touch</code></li> <li><code>.d-table-touch</code></li> <li><code>.d-table-row-touch</code></li> <li><code>.d-table-cell-touch</code></li> <li><code>.d-flex-touch</code></li> <li><code>.d-inline-flex-touch</code></li> </ul> <h6>For no touch</h6> <ul> <li><code>.d-none-no-touch</code></li> <li><code>.d-block-no-touch</code></li> <li><code>.d-inline-no-touch</code></li> <li><code>.d-inline-block-no-touch</code></li> <li><code>.d-table-no-touch</code></li> <li><code>.d-table-row-no-touch</code></li> <li><code>.d-table-cell-no-touch</code></li> <li><code>.d-flex-no-touch</code></li> <li><code>.d-inline-flex-no-touch</code></li> </ul> <h3 id="_visibility">Visibility</h3> <p> To change element visibility add class <code>.visible</code> or <code>.no-visible</code> to element. Responsive variations also exist for every single utility mentioned above with specify suffix. </p> <ul> <li><code>.visible</code></li> <li><code>.no-visible</code></li> <li><code>.visible-[sm | md | lg | xl | xxl]</code></li> <li><code>.no-visible-[sm | md | lg | xl | xxl]</code></li> </ul> <p class="text-small text-muted"> * Remember! Responsive utilities works with <code>min-width</code> option. </p> <h3 id="_print">Print</h3> <p> Change the <code>display</code> and <code>visibility</code> value of elements when printing with our print display utilities. </p> <ul> <li><code>.d-none-print</code></li> <li><code>.d-block-print</code></li> <li><code>.d-inline-print</code></li> <li><code>.d-inline-block-print</code></li> <li><code>.d-table-print</code></li> <li><code>.d-table-row-print</code></li> <li><code>.d-table-cell-print</code></li> <li><code>.d-flex-print</code></li> <li><code>.d-inline-flex-print</code></li> </ul> <p> Display print utilities defined inside the: </p> <pre class=""><code> @media print { ... } </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>