React Bootstrap Grid examples

React Bootstrap grid examples - examples & tutorial

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

.col-md-4

.col-lg-4

.col-xl-4

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <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>
            );
          }

          export default GridExamplesPage;

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

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <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>
            );
          }

          export default GridExamplesPage;

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

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="3">.col-md-3</MDBCol>
                  <MDBCol md="6">.col-md-4</MDBCol>
                  <MDBCol md="3">.col-md-4</MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }

          export default GridExamplesPage;

Two columns

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

.col-md-8

.col-md-4

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <MDBContainer>
                <MDBRow>
                  <MDBCol md="8">.col-md-8</MDBCol>
                  <MDBCol md="4">.col-md-4</MDBCol>
                </MDBRow>
              </MDBContainer>
            );
          }

          export default GridExamplesPage;

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

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <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>
            );
          }

          export default GridExamplesPage;

Mixed: mobile and desktop

The MDBReact grid system has five tiers of props: 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

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <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>
            );
          }

          export default GridExamplesPage;

Mixed: mobile, tablet and desktop

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

.col-6 .col-lg-4

.col-6 .col-sm-4

Show code

        
            
          import React from "react";
          import { MDBContainer, MDBRow, MDBCol } from "mdbreact";

          const GridExamplesPage = () => {
            return (
              <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>
            );
          }

          export default GridExamplesPage;

React Grid 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.

Show code

        
            
      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	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" ... />`