Material design bootstrap 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 followed by an in-depth look at how the grid comes together.

Detailed documentation and more examples you can find in our Material Design Grid Docs

Basic example - Three equal columns

You can have three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and smaller, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

    <div class="container">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4">.col-md-4</div>
        </div>
      </div>

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8
.col-md-4

        <div class="container">
            <div class="row">
              <div class="col-md-8">.col-md-8</div>
              <div class="col-md-4">.col-md-4</div>
            </div>
          </div>

Five grid tiers

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

        <div class="container">
            <div class="row">
              <div class="col-4">.col-4</div>
              <div class="col-4">.col-4</div>
              <div class="col-4">.col-4</div>
            </div>
          
            <div class="row">
              <div class="col-sm-4">.col-sm-4</div>
              <div class="col-sm-4">.col-sm-4</div>
              <div class="col-sm-4">.col-sm-4</div>
            </div>
          
            <div class="row">
              <div class="col-md-4">.col-md-4</div>
              <div class="col-md-4">.col-md-4</div>
              <div class="col-md-4">.col-md-4</div>
            </div>
          
            <div class="row">
              <div class="col-lg-4">.col-lg-4</div>
              <div class="col-lg-4">.col-lg-4</div>
              <div class="col-lg-4">.col-lg-4</div>
            </div>
          
            <div class="row">
              <div class="col-xl-4">.col-xl-4</div>
              <div class="col-xl-4">.col-xl-4</div>
              <div class="col-xl-4">.col-xl-4</div>
            </div>
          </div>