Grid

Grid System

Currently, MUI uses the same grid system as Bootstrap except with the mui- class prefix prepended. The system is a mobile-first grid that scales up to 12 columns as the viewport size increases.

Example: Stacked-to-horizontal

md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-8
md-4
md-4
md-4
md-4
md-6
md-6
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-8">md-8</div>
    <div class="mui-col-md-4">md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4">md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-6">md-6</div>
    <div class="mui-col-md-6">md-6</div>
  </div>
</div>

Example: Mobile and desktop

xs-12 md-8
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6
xs-6
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-xs-12 mui-col-md-8">xs-12 md-8</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-xs-6">xs-6</div>
    <div class="mui-col-xs-6">xs-6</div>
  </div>
</div>

Example: Offsetting columns

md-4
md-4 md-offset-4
md-3 md-offset-3
md-3 md-offset-3
md-6 md-offset-3
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4 mui-col-md-offset-4">md-4 md-offset-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-3 mui-col-md-offset-3">md-3 md-offset-3</div>
    <div class="mui-col-md-3 mui-col-md-offset-3">md-3 md-offset-3</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-6 mui-col-md-offset-3">md-6 md-offset-3</div>
  </div>
</div>
« Previous Next »