Rate this docs

React Bootstrap Grid examples

React grid examples- Bootstrap 4 & Material Design

Basic grid layouts to get you familiar with building within the Bootstrap grid system.


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


            <MDBContainer>

                <MDBRow>
                  <MDBCol size="4">.col-4</MDBCol>
                  <MDBCol size="4">.col-4</MDBCol>
                  <MDBCol size="4">.col-4</MDBCol>
                </MDBRow>

                <MDBRow>
                  <MDBCol sm="4">.col-sm-4</MDBCol>
                  <MDBCol sm="4">.col-sm-4</MDBCol>
                  <MDBCol sm="4">.col-sm-4</MDBCol>
                </MDBRow>

                <MDBRow>
                  <MDBCol md="4">.col-md-4</MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                </MDBRow>

                <MDBRow>
                  <MDBCol lg="4">.col-lg-4</MDBCol>
                  <MDBCol lg="4">.col-lg-4</MDBCol>
                  <MDBCol lg="4">.col-lg-4</MDBCol>
                </MDBRow>

                <MDBRow>
                  <MDBCol xl="4">.col-xl-4</MDBCol>
                  <MDBCol xl="4">.col-xl-4</MDBCol>
                  <MDBCol xl="4">.col-xl-4</MDBCol>
                </MDBRow>
              </MDBContainer>

        

            .row > div {
            padding: 1rem;
            background-color: #33b5e5;
            border: 2px solid #fff;
            color: #fff;
            text-align: center;
          }
        

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

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

              <MDBContainer>
                <MDBRow>
                  <MDBCol md="4">.col-md-4</MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                </MDBRow>
              </MDBContainer>
          

              .row > div {
              padding: 1rem;
              background-color: #33b5e5;
              border: 2px solid #fff;
              color: #fff;
              text-align: center;
            }
          

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3
.col-md-6
.col-md-3

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

Two columns

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

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

            <MDBContainer>
              <MDBRow>
                <MDBCol md="8">.col-md-8</MDBCol>
                <MDBCol md="4">.col-md-4</MDBCol>
              </MDBRow>
            </MDBContainer>
        

            .row > div {
            padding: 1rem;
            background-color: #33b5e5;
            border: 2px solid #fff;
            color: #fff;
            text-align: center;
          }
        

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

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

            <MDBContainer>
                <MDBRow>
                  <MDBCol md="8">
                    .col-md-8
                    <MDBRow>
                      <MDBCol md="6">.col-md-6</MDBCol>
                      <MDBCol md="6">.col-md-6</MDBCol>
                    </MDBRow>
                  </MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                </MDBRow>
              </MDBContainer>
        

            .row > div {
            padding: 1rem;
            background-color: #33b5e5;
            border: 2px solid #fff;
            color: #fff;
            text-align: center;
          }
        

Mixed: mobile and desktop

The MDBReact grid system has five tiers of props: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these props to create more dynamic and flexible layouts. Each tier of props scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

            <MDBContainer>
                <MDBRow>

                  <MDBCol size="12" md="8">.col-12 .col-md-8</MDBCol>
                  <MDBCol size="6" md="4">.col-6 .col-md-4</MDBCol>
                </MDBRow>
                <MDBRow>
                  <MDBCol size="6" md="4">.col-6 .col-md-4</MDBCol>
                  <MDBCol size="6" md="4">.col-6 .col-md-4</MDBCol>
                  <MDBCol size="6" md="4">.col-6 .col-md-4</MDBCol>
                </MDBRow>
                <MDBRow>
                  <MDBCol size="6">.col-6</MDBCol>
                  <MDBCol size="6">.col-6</MDBCol>
                </MDBRow>
              </MDBContainer>
        

            .row > div {
            padding: 1rem;
            background-color: #33b5e5;
            border: 2px solid #fff;
            color: #fff;
            text-align: center;
          }
        

Mixed: mobile, tablet and desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

            <MDBContainer>
                <MDBRow>
                  <MDBCol size="12" sm="6" lg="8">.col-12 .col-sm-6 .col-lg-8</MDBCol>
                  <MDBCol size="6" lg="4">.col-6 .col-lg-4</MDBCol>
                </MDBRow>
                <MDBRow>
                  <MDBCol size="6" sm="4">.col-6 .col-sm-4</MDBCol>
                  <MDBCol size="6" sm="4">.col-6 .col-sm-4</MDBCol>
                  <MDBCol size="6" sm="4">.col-6 .col-sm-4</MDBCol>
                </MDBRow>
              </MDBContainer>
        

            .row > div {
            padding: 1rem;
            background-color: #33b5e5;
            border: 2px solid #fff;
            color: #fff;
            text-align: center;
          }
        

React Gid System - API

In this section you will find advanced information about React Gid System. You will find out which modules are required, what are the possibilities of configuring, and what events and methods you can use in working with it.


Grid system import statement

In order to use Grid system components make sure you have imported proper modules first.


              import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';
          

API Reference: MDBContainer Properties

The table below shows the configuration options of the MDBContainer component.

Name Type Default Description Example
className String Adds custom classes <MDBContainer className="myClass" ... />
fluid Boolean Use for a full width container, spanning the entire width of your viewport. <MDBContainer fluid ... />

API Reference: MDBRow Properties

The table below shows the configuration options of the MDBRow component.

Name Type Default Description Example
around Boolean Changes alignment of items within MDBRow component. It distributes space around direct childrens <MDBRow around ... />
between Boolean Changes alignment of items within MDBRow component. It distributes space between direct childrens <MDBRow between ... />
bottom Boolean Changes alignment of MDBRow whitin a container. MDBRow is placed at the end <MDBRow bottom ... />
center Boolean Changes alignment of items within MDBRow component. It puts direct childrens around the center <MDBRow center ... />
className String Adds custom classes <MDBRow className="customClass" ... />
end Boolean Changes alignment of items within MDBRow component. It puts direct childrens at the end <MDBRow end ... />
middle Boolean Changes alignment of MDBRow whitin a container. MDBRow is placed around the center <MDBRow middle ... />
start Boolean Changes alignment of items within MDBRow component. It puts direct childrens at the start <MDBRow start ... />
tag String div <MDBRow tag="div" ... />
top Boolean Changes alignment of MDBRow whitin a container. MDBRow is placed at the start <MDBRow top ... />

API Reference: MDBCol Properties

The table below shows the configuration options of the MDBCol component.

Name Type Default Description Example
bottom Boolean Changes alignment of MDBCol whitin a row. MDBCol is placed at the end <MDBCol bottom ... />
className String Adds custom classes <MDBCol className="myClass" ... />
lg String Gives n equal-width columns starting at larger desctops. <MDBCol lg="4" ... />
md String Gives n equal-width columns starting at medium devices and scaling to large desktops. <MDBCol md="4" ... />
size String Indicates the number of columns you’d like to use out of the possible 12 per row <MDBCol size="4" ... />
sm String Gives n equal-width columns starting at small devices and scaling to large desktops. <MDBCol sm="4" ... />
middle Boolean Changes alignment of MDBCol whitin a row. MDBCol is placed around the center <MDBCol middle ... />
top Boolean Changes alignment of MDBCol whitin a row. MDBCol is placed at the start <MDBCol top ... />
xl String Gives n equal-width columns starting at extra larg devices. <MDBCol xl="4" ... />
xs String Gives n equal-width columns starting at extra small devices and scaling to large desktops. <MDBCol xs="4" ... />