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="Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. The most popular HTML, CSS, and JS library in Metro style."> <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>Sizing - 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="#">Sizing</a></li> <li class="toc-entry"><a href="#_sizing_width">Width</a></li> <li class="toc-entry"><a href="#_sizing_height">Height</a></li> <li class="toc-entry"><a href="#_sizing_responsive">Responsive</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>Sizing</h1> <p class="text-leader"> Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. </p>  <h3 id="_sizing_width">Width</h3> <p> Width utilities are support for 25%, 50%, 75%, and 100% by default. </p> <div class="example p-0"> <div class="w-25 p-1 bg-grayWhite">Width 25%</div> <div class="w-50 p-1 bg-grayWhite">Width 50%</div> <div class="w-75 p-1 bg-grayWhite">Width 75%</div> <div class="w-100 p-1 bg-grayWhite">Width 100%</div> </div> <pre><code class="html"> <div class="w-25">Width 25%</div> <div class="w-50">Width 50%</div> <div class="w-75">Width 75%</div> <div class="w-100">Width 100%</div> </code></pre> <h4>Max-width</h4> <p> You can also use <code>max-with</code> utilities as needed: <code>.mw-25</code>, <code>.mw-50</code>, <code>.mw-75</code>, <code>.mw-100</code>. </p> <div class="example p-0"> <div class="bg-gray mw-75">Max width 75%</div> </div> <pre><code class="html"> <div class="mw-75">Max width 75%</div> </code></pre> <h3 id="_sizing_height">Height</h3> <p> height utilities are support for 25%, 50%, 75%, and 100% by default. </p> <div class="example clear p-0" style="height: 120px"> <div class="w-25 h-25 bg-grayWhite float-left">Height 25%</div> <div class="w-25 h-50 bg-grayWhite float-left">Height 50%</div> <div class="w-25 h-75 bg-grayWhite float-left">Height 75%</div> <div class="w-25 h-100 bg-grayWhite float-left">Height 100%</div> </div> <pre><code class="html"> <div class="h-25">Height 25%</div> <div class="h-50">Height 50%</div> <div class="h-75">Height 75%</div> <div class="h-100">Height 100%</div> </code></pre> <h4>Max-height</h4> <p> You can also use <code>max-height</code> utilities as needed: <code>.mh-25</code>, <code>.mh-50</code>, <code>.mh-75</code>, <code>.mh-100</code>. </p> <div class="example p-0" style="height: 120px"> <div class="bg-gray h-100 mh-75">Max height 75%</div> </div> <pre><code class="html"> <div class="mh-75">Max height 75%</div> </code></pre> <h3 id="_sizing_responsive">Responsive</h3> <p> All sizing utilities classes has media variants with breakpoints suffixes: <code>-sm</code>, <code>-md</code>, <code>-lg</code>, <code>-xl</code>, <code>-xxl</code>. </p> </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>