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="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Less variables and mixins, and dozens of predefined classes."> <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>Grid system - 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="#">Grid system</a></li> <li class="toc-entry"><a href="#_grid_about">About</a></li> <li class="toc-entry"><a href="#_how_it_works">How it works</a></li> <li class="toc-entry"><a href="#_colspan">Colspan</a></li> <li class="toc-entry"><a href="#_offset">Offset</a></li> <li class="toc-entry"><a href="#_media_columns">Media columns</a></li> <li class="toc-entry"><a href="#_gaps">Gaps</a></li> <li class="toc-entry"><a href="#_stub_column">Stub column</a></li> <li class="toc-entry"><a href="#_ordering">Ordering</a></li> <li class="toc-entry"><a href="#_nested_rows">Nested rows</a></li> <li class="toc-entry"><a href="#_alignment">Alignment columns</a></li> <li> <ul> <li class="toc-entry"><a href="#_alignment_columns_v">Vertical</a></li> <li class="toc-entry"><a href="#_alignment_columns_h">Horizontal</a></li> </ul> </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 id="_grid_system">Grid system</h1> <p class="text-leader"> Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Less variables and mixins, and dozens of predefined classes. </p>  <h3 id="_grid_about">About</h3> <p> Metro 4 grid system uses a series of containers, rows, and columns to layout and align content. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell"><div>1</div></div> <div class="cell"><div>2</div></div> <div class="cell"><div>3</div></div> <div class="cell"><div>4</div></div> <div class="cell"><div>5</div></div> <div class="cell"><div>6</div></div> <div class="cell"><div>7</div></div> <div class="cell"><div>8</div></div> <div class="cell"><div>9</div></div> <div class="cell"><div>10</div></div> <div class="cell"><div>11</div></div> <div class="cell"><div>12</div></div> </div> <div class="row"> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> </div> <div class="row"> <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div> </div> <div class="row"> <div class="cell-3"><div>cell-3</div></div> <div class="cell-6 offset-3"><div>cell-6 + offset-3</div></div> </div> <div class="row"> <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell"> <div class="row"> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> </div> </div> </div> </div> </div> <pre><code class="html"> <div class="grid"> <div class="row"> <div class="cell"><div>1</div></div> <div class="cell"><div>2</div></div> <div class="cell"><div>3</div></div> <div class="cell"><div>4</div></div> <div class="cell"><div>5</div></div> <div class="cell"><div>6</div></div> <div class="cell"><div>7</div></div> <div class="cell"><div>8</div></div> <div class="cell"><div>9</div></div> <div class="cell"><div>10</div></div> <div class="cell"><div>11</div></div> <div class="cell"><div>12</div></div> </div> <div class="row"> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> <div class="cell-3"><div>cell-3</div></div> </div> <div class="row"> <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div> </div> <div class="row"> <div class="cell-3"><div>cell-3</div></div> <div class="cell-6 offset-3"><div>cell-6 + offset-3</div></div> </div> <div class="row"> <div class="cell-4 offset-4"><div>cell-4 + offset-4</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell"> <div class="row"> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> <div class="cell"><div>nested</div></div> </div> </div> </div> </div> </code></pre> <h3 id="_how_it_works">How it works</h3> <p> Metro 4 grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 demo-grid"> <div class="row"> <div class="cell-sm"><div>One of three columns</div></div> <div class="cell-sm"><div>One of three columns</div></div> <div class="cell-sm"><div>One of three columns</div></div> </div> </div> <p> The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent <code>.container</code>. </p> <p> Breaking it down, here’s how it works: </p> <ul> <li>Containers provide a means to center your site’s contents. Use <code>.container</code> for fixed width or <code>.container-fluid</code> for full width.</li> <li>User rows grouping with <code>.grid</code> container</li> <li>Rows are horizontal groups of columns that ensure your columns are lined up properly. We use the negative margin method on <span class="tally">.row</span> to ensure all your content is aligned properly down the left side.</li> <li>Content should be placed within columns, and only columns may be immediate children of rows.</li> <li>Grid columns without a set width will automatically layout with equal widths. For example, four instances of <span class="tally">.cell-sm</span> will each automatically be <span class="tally">25%</span> wide for small breakpoints.</li> <li>Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns, you can use <span class="tally">.cell-sm-4</span>.</li> <li>Column widths are set in percentallyes, so they’re always fluid and sized relative to their parent element.</li> <li>Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with <span class="tally">.no-gap</span> on the <span class="tally">.row</span> or on the <span class="tally">.grid</span> for all rows in grid.</li> <li>There are five grid tiers, one for each <a href="#">responsive breakpoint</a>: small (sm), medium (md), large (lg), extra large (xl) and ultra large (xxl).</li> <li>Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., <span class="tally">.cell-md-4</span> applies to medium, large, extra large and ultra large devices).</li> <li>You can use predefined grid classes for more semantic markup.</li> </ul> <pre class=""><code>  <div class="grid"> <div class="row"> <div class="cell"></div> ... <div class="cell"></div> </div> ... <div class="row"> <div class="cell"></div> ... <div class="cell"></div> </div> </div>  <div class="row"> <div class="cell"></div> ... <div class="cell"></div> </div>  <div class="row"> <div class="cell"> <div class="row"> <div class="cell"></div> ... <div class="cell"></div> </div> </div> </div> </code></pre> <h3 id="_colspan">Colspan</h3> <p> If you need to combine columns, there are appropriate classes for this: <span class="tally">.cell-1</span> through <span class="tally">.cell-12</span> and specific media offsets <span class="tally">.cell-*-1</span> through <span class="tally">.cell-*-12</span>. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell colspan-1"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-2"><div>colspan2</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-3"><div>colspan3</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-4"><div>colspan4</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell-4"></div> <div class="cell-4"></div> <div class="cell-4"></div> </div> <div class="row"> <div class="colspan-4"></div> <div class="colspan-4"></div> <div class="colspan-4"></div> </div> </code></pre> <h3 id="_offset">Offset</h3> <p> If you need to shift the column, there are appropriate classes for this: <span class="tally">.offset-1</span> through <span class="tally">.offset-12</span> and specific media offsets <span class="tally">.offset-*-1</span> through <span class="tally">.offset-*-12</span>. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell offset-1"><div>offset1</div></div> </div> <div class="row"> <div class="cell offset-2"><div>offset2</div></div> </div> <div class="row"> <div class="cell offset-3"><div>offset3</div></div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell offset-1"></div> </div> <div class="row"> <div class="cell offset-2"></div> </div> <div class="row"> <div class="cell offset-3"></div> </div> </code></pre>  <h3 id="_media_columns">Media columns</h3> <p> There are five grid tiers, one for each <a href="#">responsive breakpoint</a>: small (sm), medium (md), large (lg), extra large (xl) and ultra large (xxl). </p> <table class="table cell-border table-border cell-media-table"> <thead> <tr> <td style="width: 200px">Breakpoints</td> <td>min-width</td> </tr> </thead> <tbody> <tr> <td class="bg-light">sm</td> <td>576px</td> </tr> <tr> <td class="bg-light">md</td> <td>768px</td> </tr> <tr> <td class="bg-light">lg</td> <td>992px</td> </tr> <tr> <td class="bg-light">xl</td> <td>1200px</td> </tr> <tr> <td class="bg-light">xxl</td> <td>1452px</td> </tr> </tbody> </table> <p> You can use predefined grid classes for more semantic markup. </p> <table class="table cell-border table-border cell-media-table"> <thead> <tr> <td style="width: 200px">Target</td> <td>Media</td> <td class="d-none d-block-md">Example</td> </tr> </thead> <tbody> <tr> <td style="width: 200px" class="bg-light">colspan</td> <td>cell-@-*</td> <td class="d-none d-block-md">cell-md-3</td> </tr> <tr> <td class="bg-light">offset</td> <td>offset-@-*</td> <td class="d-none d-block-md">offset-md-3</td> </tr> <tr> <td class="bg-light">ordering</td> <td>order-@-*</td> <td class="d-none d-block-md">order-md-3</td> </tr> <tr> <td class="bg-light">width auto</td> <td>cell-@-auto</td> <td class="d-none d-block-md">cell-md-auto</td> </tr> <tr> <td class="bg-light">width 100%</td> <td>cell-@-full</td> <td class="d-none d-block-md">cell-md-full</td> </tr> <tr> <td class="bg-light">width 100%</td> <td>cell-@</td> <td class="d-none d-block-md">cell-md</td> </tr> <tr> <td class="bg-light">width 25%</td> <td>cell-@-quarter</td> <td class="d-none d-block-md">cell-md-quarter</td> </tr> <tr> <td class="bg-light">width 50%</td> <td>cell-@-half</td> <td class="d-none d-block-md">cell-md-half</td> </tr> <tr> <td class="bg-light">width 1/3</td> <td>cell-@-one-third</td> <td class="d-none d-block-md">cell-md-one-third</td> </tr> <tr> <td class="bg-light">width 2/3</td> <td>cell-@-two-third</td> <td class="d-none d-block-md">cell-md-two-third</td> </tr> </tbody> </table> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell-sm-full cell-md-one-third cell-lg-3"><div>1</div></div> <div class="cell-sm-full cell-md-two-third cell-lg-3"><div>1</div></div> <div class="cell-sm-full cell-md-half cell-lg-3"><div>1</div></div> <div class="cell-sm-full cell-md-half cell-lg-3"><div>1</div></div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell-sm-full cell-md-one-third cell-lg-3"></div> <div class="cell-sm-full cell-md-two-third cell-lg-3"></div> <div class="cell-sm-full cell-md-half cell-lg-3"></div> <div class="cell-sm-full cell-md-half cell-lg-3"></div> </div> </code></pre> <h3 id="_gaps">Gaps</h3> <p> The gaps between columns in our predefined grid classes can be removed with <span class="tally">.no-gap</span>. This removes the negative margins from <span class="tally">.row</span> and the horizontal padding from all immediate children columns. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <h5>With gaps</h5> <div class="grid demo-grid gaps-demo"> <div class="row"> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-2"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-4"><div>1</div></div> <div class="cell colspan-4"><div>1</div></div> <div class="cell colspan-4"><div>1</div></div> </div> </div> <h5>No gaps</h5> <div class="grid no-gap demo-grid gaps-demo"> <div class="row"> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-2"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> <div class="cell"><div>1</div></div> </div> <div class="row"> <div class="cell colspan-4"><div>1</div></div> <div class="cell colspan-4"><div>1</div></div> <div class="cell colspan-4"><div>1</div></div> </div> </div> </div> <pre class=""><code> <div class="grid no-gap">...</div> <div class="row no-gap">...</div> </code></pre> <h3 id="_stub_column">Stub column</h3> <p> With class <span class="tally">.stub</span> you can create column with fixed width. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="stub" style="width: 300px"><div>Stub column</div></div> <div class="cell"><div>1</div></div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="stub" style="width: 300px"></div> <div class="cell"></div> </div> </code></pre> <h3 id="_ordering">Ordering</h3> <p> You can use classes <span class="tally">.order-*</span> to set order columns. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell order-2"><div>Order 2</div></div> <div class="cell order-1"><div>Order 1</div></div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell order-2">Order 2</div> <div class="cell order-1">Order 1</div> </div> </code></pre> <h3 id="_nested_rows">Nested rows</h3> <p> Metro 4 supports nested rows. </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md"> <div class="grid demo-grid"> <div class="row"> <div class="cell"><div>Cell 1</div></div> <div class="cell"><div>Cell 2</div></div> <div class="cell"><div>Cell 2</div></div> <div class="cell"><div>Cell 3</div></div> </div> <div class="row"> <div class="cell"> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> </div> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> </div> </div> <div class="cell"><div>Nested row</div></div> </div> <div class="row"> <div class="cell"> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> </div> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> </div> <div class="row"> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> <div class="cell"><div>Nested row</div></div> </div> </div> </div> </div> </div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell"> <div class="row"> <div class="cell"></div> ... <div class="cell"></div> </div> </div> </div> </code></pre> <h3 id="_alignment">Alignment columns</h3> <p> To vertical and horizontal align column you can use flexbox alignment utilities classes. </p> <h4 id="_alignment_columns_v">Vertical alignment</h4> <p> For vertical alignment all cells in a row: <span class="tally">.flex-align-start</span>, <span class="tally">.flex-align-end</span>, <span class="tally">.flex-align-center</span>, <span class="tally">.flex-align-stretch</span>, <span class="tally">.flex-align-baseline</span>, </p> <p> For vertical alignment self cell in a row: <span class="tally">.flex-align-self-start</span>, <span class="tally">.flex-align-self-end</span>, <span class="tally">.flex-align-self-center</span>, <span class="tally">.flex-align-self-stretch</span>, <span class="tally">.flex-align-self-baseline</span>, </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid"> <div class="row flex-align-start bg-light" style="height: 10rem;"> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> </div> <br/> <div class="row flex-align-center bg-light" style="height: 10rem;"> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> </div> <br /> <div class="row flex-align-end bg-light" style="height: 10rem;"> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> <div class="cell"><div>cell</div></div> </div> </div> <pre class=""><code> <div class="row flex-align-start"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <br/> <div class="row flex-align-center"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> <br /> <div class="row flex-align-end"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </code></pre> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid"> <div class="row bg-light" style="height: 10rem;"> <div class="cell flex-align-self-start"><div>start</div></div> <div class="cell flex-align-self-center"><div>center</div></div> <div class="cell flex-align-self-end"><div>end</div></div> </div> </div> <pre class=""><code> <div class="row"> <div class="cell flex-align-self-start"></div> <div class="cell flex-align-self-center"></div> <div class="cell flex-align-self-end"></div> </div> </code></pre> <h4 id="_alignment_columns_h">Horizontal alignment</h4> <p> For horizontal alignment cells in a row: <span class="tally">.flex-justify-start</span>, <span class="tally">.flex-justify-end</span>, <span class="tally">.flex-justify-center</span>, <span class="tally">.flex-justify-between</span>, <span class="tally">.flex-justify-around</span>, </p> <div class="container-fluid p-5 border border-4 bd-grayWhite mt-3 mb-3 d-none d-block-md demo-grid"> <div class="row bg-light flex-justify-start"> <div class="cell-4">cell</div> <div class="cell-4">cell</div> </div> <br /> <div class="row bg-light flex-justify-center"> <div class="cell-4">cell</div> <div class="cell-4">cell</div> </div> <br /> <div class="row bg-light flex-justify-end"> <div class="cell-4">cell</div> <div class="cell-4">cell</div> </div> <br /> <div class="row bg-light flex-justify-around"> <div class="cell-4">cell</div> <div class="cell-4">cell</div> </div> <br/> <div class="row bg-light flex-justify-between"> <div class="cell-4">cell</div> <div class="cell-4">cell</div> </div> </div> <p> Also you can use media alignment classes such as <span class="tally">.flex-align-start-*</span>, <span class="tally">.flex-justify-start-*</span> where asterisk is responsive breakpoint (sm, md, lg, xl, xxl) </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>