Demos

The demo columns below have a background color, with left and right borders applied for illustration. Any overlapping or stacking caused by this wont occur in your projects.

Default Container

Manhattan's default container restricts content width on screens over 1200px wide. The following examples are of equal width columns.

<div mhtn="container">
  <div mhtn="row">
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-10"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-20"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-25"></div>
    <div mhtn="col xs-25"></div>
    <div mhtn="col xs-25"></div>
    <div mhtn="col xs-25"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-33"></div>
    <div mhtn="col xs-33"></div>
    <div mhtn="col xs-33"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-50"></div>
    <div mhtn="col xs-50"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-100"></div>
  </div>
</div>

Flex Container

The flex container expands to any sized screen, keeping the content padded. The following examples are of two column layouts with various width combinations.

<div mhtn="container flex">
  <div mhtn="row">
    <div mhtn="col xs-90"></div>
    <div mhtn="col xs-10"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-80"></div>
    <div mhtn="col xs-20"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-70"></div>
    <div mhtn="col xs-30"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-60"></div>
    <div mhtn="col xs-40"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-50"></div>
    <div mhtn="col xs-50"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-40"></div>
    <div mhtn="col xs-60"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-30"></div>
    <div mhtn="col xs-70"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-80"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-90"></div>
  </div>
</div>

Edge Container

The edge container expands to any sized screen and removes padding for edge to edge content. The following example demonstrates three column layouts with various widths.

<div mhtn="container edge">
  <div mhtn="row">
    <div mhtn="col xs-10"></div>
    <div mhtn="col xs-80"></div>
    <div mhtn="col xs-10"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-20"></div>
    <div mhtn="col xs-60"></div>
    <div mhtn="col xs-20"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-25"></div>
    <div mhtn="col xs-50"></div>
    <div mhtn="col xs-25"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-30"></div>
    <div mhtn="col xs-40"></div>
    <div mhtn="col xs-30"></div>
  </div>
  
  <div mhtn="row">
    <div mhtn="col xs-33"></div>
    <div mhtn="col xs-33"></div>
    <div mhtn="col xs-33"></div>
  </div>
</div>

Four Column Collapse

The following example features a four column layout which collapses to two columns on small screens and one column on extra small screens.

<div mhtn="container">
  <div mhtn="row">
    <div mhtn="col xs-100 sm-50 md-25"></div>
    <div mhtn="col xs-100 sm-50 md-25"></div>
    <div mhtn="col xs-100 sm-50 md-25"></div>
    <div mhtn="col xs-100 sm-50 md-25"></div>
  </div>
</div>