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-8

md-4

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

<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-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>