How to Customize React-Bootstrap Spacing in Navigation Bar ?
Last Updated :
25 Jul, 2024
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:
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:
space 1 outputExample 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:
Similar Reads
How to create a navigation bar using React-Bootstrap?
React-Bootstrap is a front-end framework that was designed with React in mind. The NavBar Component is a navigation header that is responsive and powerful. It supports navigation, branding, and many other related features. In this article, we are going to implement a navigation bar using React Boots
2 min read
How to Customize the grid layout in React Bootstrap?
In this article, we will be customizing the grid layout in React Bootstrap. Grid layout is used to align the elements with ting the grid format according to the requirements. In React Bootstrap, we can control the number of columns, spacing, responsiveness, and other properties to create a more attr
5 min read
How to create a tabbed navigation menu in Bootstrap?
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The navigation bar is placed at the top of the page. Tab-based navigations are one of the most effective w
2 min read
How to create Responsive Bottom Navigation Bar using Bootstrap ?
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The word "Navigation" means the science of moving from one place to another. In this article, we create a
5 min read
How to Change Navigation Bar Color in Bootstrap?
Changing the navigation bar color in Bootstrap means customizing the appearance of the navbar by modifying its background, text, or other styling elements. Below are the approaches to change the color of the navigation bar in Bootstrap: Table of Content Using the inbuilt color classesCreating a cust
3 min read
How to add navigation links to the React Bootstrap Navbar?
In ReactJS, we use Nabvar or Navigation Bar as the core component. For ease of navigation over the application, we use this NavBar in react-bootstrap. We need to add navigation links to go through different routes or pages of the application. So to add the navigation links to the React Bootstrap Nav
5 min read
How to display black navigation bar in Bootstrap ?
A navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. There are two following ways to display a black navigation bar. Using .navbar-dark and .bg-dark classes: T
2 min read
How to customize the appearance of a button in React Bootstrap?
While developing the ReactJS forms, and submission applications, we need to use Buttons to perform different functions. These buttons can be either created using HTML tags or by using the react-bootstrap library Buttons. In the react bootstrap library there are classes through which the button is be
4 min read
How to Create Smaller `Input` in React-Bootstrap ?
ReactJS is one of the most favorite libraries for building attractive applications. Combining Bootstrap with ReactJS is a powerful tool for making the application more interactive. A Smaller Input in React-Bootstrap refers to reducing the size of an input field component, typically achieved by apply
4 min read
How to create a navbar in Bootstrap ?
Bootstrap Navbar is a navigation header that is located at the top of the webpage which can be extended or collapsed, depending on the screen size. Bootstrap Navbar is used to create responsive navigation for our website. We can create standard navigation bar with <nav class="navbar navbar-defaul
2 min read