ReactJS MDBootstrap Grid System Layout

MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component.

In this article, we will know how to use Grid System Layout in ReactJS MDBootstrap. Grid System Layout is a great tool for creating layouts that are optimized for mobile devices. It’s a powerful tool with a lot of features.

Syntax:

<MDBCol className='col-example'>...</MDBCol>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: Install ReactJS MDBootstrap in your given directory.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: This is the basic example that shows how to use Grid System Layout.

App.js

import React from "react";
import {
    MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";

export default function App() {
    return (
        <MDBContainer id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Grid System Layout</h4>

            <MDBRow className='bg-primary rounded text-light mb-3'>
                <MDBCol md='2' className='col-example'>
                    Grid System 1
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Grid System 2
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Grid System 3
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Grid System 4
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Grid System 5
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Grid System 6
                </MDBCol>
            </MDBRow>
        </MDBContainer>

    );
}

Output:

Example 2: In this example, we will know how to add multiple rows in the Grid system Layout.

App.js

import React from "react";
import {
    MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";

export default function App() {
    return (
        <MDBContainer id='gfg'>
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Grid System Layout</h4>

            <MDBRow className='bg-info rounded text-light mb-3'>
                <MDBCol md='2' className='col-example'>
                    Column A1
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column A2
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column A3
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column A4
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column A5
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column A6
                </MDBCol>
            </MDBRow>
            <MDBRow className='bg-danger rounded text-light mb-3'>
                <MDBCol md='2' className='col-example'>
                    Column B1
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column B2
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column B3
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column B4
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column B5
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column B6
                </MDBCol>
            </MDBRow>
            <MDBRow className='bg-secondary rounded text-light mb-3'>
                <MDBCol md='2' className='col-example'>
                    Column C1
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column C2
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column C3
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column C4
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column C5
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column C6
                </MDBCol>
            </MDBRow>
            <MDBRow className='bg-success rounded text-light mb-3'>
                <MDBCol md='2' className='col-example'>
                    Column D1
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column D2
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column D3
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column D4
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column D5
                </MDBCol>
                <MDBCol md='2' className='col-example'>
                    Column D6
                </MDBCol>
            </MDBRow>
        </MDBContainer>

    );
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/layout/grid/