How to Customize React-Bootstrap Spacing in Navigation Bar ?

In this article, we are going to implement React Bootstrap Spacing in the Navigation Bar. In React-Bootstrap, there are different types of classes like ‘mx-2’ , ‘my-4’ , and more that are used to manage the space between elements in horizontal and vertical order. So to customize this element’s space in the navigation bar using Bootstrap, we can use different classes. In this article, we will see how we can customize the React-Bootstrap spacing in the navigation bar.

Prerequisites:

• React JS
• JSX
• React Bootstrap

Steps to Create React Application and Install Bootstrap:

• Create a React application using the following command:

npx create-react-app nav-space

• After creating your project folder(i.e. nav-space), move to it by using the following command:

cd nav-space

• Now install react-bootstrap in your working directory i.e. nav-space by executing the below command in the VScode terminal:

npm install react-bootstrap bootstrap

• Now we need to Add Bootstrap CSS to the index.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

Project Structure

Approach

In this approach, we are creating a navbar in which there are multiple navlinks. We have implemented a button that is responsible for increasing the spacing between NavLinks. There are bootstrap classes’mx’ and’my’ and” we are updating the value on clicking on that particular button, which is increasing the space between NavLinks horizontally and vertically as well.

Example 1: This example shows the use of the above-explained approach.

Javascript

// App.js

import React, { useState } from "react";
import {
    Navbar, Nav, NavDropdown, OverlayTrigger, Tooltip,
    } from "react-bootstrap";

function App() {
    const [hSpace, setHSpacing] = useState(0);
    const home = (
        <Tooltip id="home-tooltip">
            Go to Home
        </Tooltip>)
    const about = (
        <Tooltip id="about-tooltip">
            Learn About Us
        </Tooltip>)
    const service = (
        <Tooltip id="services-tooltip">
            Explore Our Services
        </Tooltip>)
    const contact = (
        <Tooltip id="contact-tooltip">
            Contact Us
        </Tooltip>)
    const spaceIncrease = () => {
        if (hSpace < 4) {
            setHSpacing(
                (prevSpacing) =>prevSpacing + 2)}}
    return (
        <div>
            <Navbar bg="light"
                    expand="lg">
                <Navbar.Brand href="#home"
                              style={{color: "green"}}>
                    GeeksforGeeks
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <OverlayTrigger placement="bottom"
                                        overlay={home}>
                            <Nav.Link href="#home"
                                      className={`mx-${hSpace} my-2`}>
                                Home
                            </Nav.Link>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={about}>
                            <Nav.Link href="#about"
                                      className={`mx-${hSpace} my-4`}>
                                About
                            </Nav.Link>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={service}>
                            <NavDropdown title="Services"
                                         id="basic-nav-dropdown"
                                         className={`mx-${hSpace} my-6`}>
                                <NavDropdown.Item href="#service1">
                                    Pick Article
                                </NavDropdown.Item>
                                <NavDropdown.Item href="#service2">
                                    Suggest Article
                                </NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#more-services">
                                    Media
                                </NavDropdown.Item>
                            </NavDropdown>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={ contact }>
                            <Nav.Link href="#contact"
                                      className={`mx-${hSpace} my-4`}>
                                Contact
                            </Nav.Link>
                        </OverlayTrigger>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <div className="container mt-4">
                <h1>
                    Welcome to GeeksforGeeks
                </h1>
                <p>
                    GeeksforGeeks is a leading platform that
                    provides computer science resources and
                    coding challenges for programmers and
                    technology enthusiasts, along with interview
                    and exam preparations for upcoming
                    aspirants.
                </p>
                <button
                    onClick={spaceIncrease}>
                    Increase Spacing
                </button>
                <p>
                    Current Spacing:{" "} {hSpace}
                </p>
            </div>
        </div>
)}
export default App;

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will customize the navigation bar.

Javascript

// App.js

import React, { useState } from "react";
import { Navbar, Nav, NavDropdown, OverlayTrigger, Tooltip,
    } from "react-bootstrap";
function App() {
    const [vSpace, setVSpacing] = useState(0);
    const home = (
        <Tooltip id="home-tooltip">
            Go to Home
        </Tooltip>);
    const about = (
        <Tooltip id="about-tooltip">
            Learn About Us
        </Tooltip>);
    const service = (
        <Tooltip id="services-tooltip">
            Explore Our Services
        </Tooltip>);
    const contact = (
        <Tooltip id="contact-tooltip">
            Contact Us
        </Tooltip>);
    const vSpaceIncrease = () => {
        if (vSpace < 4) {
            setVSpacing(
                (prevSpacing) => prevSpacing + 2)}}

    return (
        <div>
            <Navbar bg="light"
                    expand="lg">
                <Navbar.Brand href="#home"
                              style={{ color: "green" }}>
                    GeeksforGeeks
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <OverlayTrigger placement="bottom"
                                        overlay={home}>
                            <Nav.Link href="#home"
                                      className={`mx-2 my-${2 + vSpace}`}>
                                Home
                            </Nav.Link>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={about}>
                            <Nav.Link href="#about"
                                      className={`mx-2 my-${4 + vSpace}`}>
                                About
                            </Nav.Link>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={service}>
                            <NavDropdown title="Services"
                                         id="basic-nav-dropdown"
                                         className={`mx-2 my-${6 + vSpace}`}>
                                <NavDropdown.Item href="#service1">
                                    Pick Article
                                </NavDropdown.Item>
                                <NavDropdown.Item href="#service2">
                                    Suggest Article
                                </NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#more-services">
                                    Media
                                </NavDropdown.Item>
                            </NavDropdown>
                        </OverlayTrigger>
                        <OverlayTrigger placement="bottom"
                                        overlay={contact}>
                            <Nav.Link href="#contact"
                                      className={`mx-2 my-${4 + vSpace}`}>
                                Contact
                            </Nav.Link>
                        </OverlayTrigger>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <div className="container mt-4">
                <h1>
                    Welcome to GeeksforGeeks
                </h1>
                <p>
                    GeeksforGeeks is a leading platform
                    that provides computer science
                    resources and coding challenges for
                    programmers and technology enthusiasts,
                    along with interview and exam
                    preparations for upcoming
                    aspirants.
                </p>
                <button onClick={vSpaceIncrease}>
                    Increase Vertical Spacing
                </button>
                <p>
                    Current Vertical Spacing: {vSpace}
                </p>
            </div>
        </div>
    )}
export default App;

Steps to run the aplication: Run the application using the following command from the root directory of the project:

npm start

Output: