ReactJS MDBootstrap Spacing Utilities

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 Spacing Utilities in ReactJS MDBootstrap.
The Spacing Utilities is used to include a number of responsive margin and padding utility classes that can be used to change the appearance of an element.

Syntax:

<div className="mx-1" >spacing</div>

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 Close Button Utilities.

App.js

import React from "react";

export default function App() {

    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spacing</h4>
            <br />

            <div className="mx-5"
                 style={{ width: 200, backgroundColor: 'red' }}>
                Spacing Utilities
            </div>
            <br />
            <h3 className="mx-5"
                style={{ width: 200, backgroundColor: 'blue' }}>
                Spacing Utilities
            </h3>
            <br />
            <p className="mx-5"
               style={{ width: 200, backgroundColor: 'green' }}>
                Spacing Utilities
            </p>

        </div>
    );
}

Output:

Example 2: In this example, we will know how to add padding in Spacing Utilities.

App.js

import React from "react";

export default function App() {

    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spacing</h4>
            <br />

            <div className="px-2"
                 style={{ width: 200, backgroundColor: 'red' }}>
                Spacing Utilities
            </div>
            <br />
            <h3 className="px-3"
                style={{ width: 200, backgroundColor: 'blue' }}>
                Spacing Utilities
            </h3>
            <br />
            <p className="px-4"
               style={{ width: 200, backgroundColor: 'green' }}>
                Spacing Utilities
            </p>

        </div>
    );
}

Output:

Example 3: In this example, we will know how to add a grid in spacing utilities.

App.js

import React from "react";

export default function App() {

    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Spacing</h4>
            <br />

            <div className="d-grid gap-4">
                <div className="p-3 bg-danger">
                    Spacing Utility
                </div>
                <div className="p-4 bg-warning">
                    Spacing Utility
                </div>
                <div className="p-5 bg-success">
                    Spacing Utility
                </div>
            </div>
        </div>
    );
}

Output:

Reference: https://mdbootstrap.com/docs/b5/react/utilities/spacing/