How to Pull React-Bootstrap Navbar Components to the Right?

When we develop a website using React-Bootstrap, sometimes we need the navbar items aligned to the right side of the navbar. We can achieve it using different classes already defined in React-Bootstrap. we will learn how to make React-Bootstrap Navbar components to Right.

These are the following ways to Pull React-Bootstrap Navbar Components to the Right:

Setup the React-Bootstrap Project

Step 1: First create a React app

npx create-react-app myapp

Step 2: Go to the project folder

cd my app

Step 3: Install required dependencies

npm install react-bootstrap bootstrap

Step 4: Open 'src/index.js' and add the following import code

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

Updated Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.3",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Project Structure:

Step 5: Run the react app

npm start

Using ms-auto class

In this approach, we will use "ms-auto" utility class which is used to add left margin automatically which pushes content to the right. This is the simplest and effective methods to Pull React-Bootstrap Navbar Components to the Right.

Example: Here, We have created a navbar using React-Bootstrap having 3 navbar components at right and a GeeksforGeeks text written in left.

//App.js
//Approach1 (using ms-auto)
import React from "react";
import { Navbar, Nav } from "react-bootstrap";
import "./App.css"; // Assuming your custom CSS is here

function App() {
  return (
    <div>
      <Navbar bg="success" variant="dark" expand="lg">
        <Navbar.Brand href="#home">GeeksforGeeks</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          {/* Using ms-auto to align the Nav items to the right */}
          <Nav className="ms-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Learn Coding</Nav.Link>
            <Nav.Link href="#">Explore more</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
      <div style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
        How to Pull React-Bootstrap Navbar Components to the Right using ms-auto
      </div>
    </div>
  );
}

export default App;

Output: Here we can observe, the navbar components are aligned to right using ms-auto class utility in React-Bootstrap.

Using justify-content-end class

In this approach, we will use "justify-content-end" utility class. This is a flexbox based method which pushes all the Navbar components to the right. It is easy to implement and understand.

Example: Here, we have created a navbar using React-Bootstrap having 3 navbar components at right using justify-content-end utility class and a GeeksforGeeks text written in left.

//App.js
//Approach2 (using justify-content-end)
import React from "react";
import { Navbar, Nav } from "react-bootstrap";
import "./App.css"; 
// Assuming your custom CSS is here

function App() {
    return (
        <div>
            <Navbar bg="success" variant="dark" expand="lg">
                <Navbar.Brand href="#home">GeeksforGeeks</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    {/* Using justify-content-end to align the Nav items to the right */}
                    <Nav className="justify-content-end" style={{ width: "100%" }}>
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#">Learn Coding</Nav.Link>
                        <Nav.Link href="#link">Explore more</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <div style={{ color: "green", textAlign: "center", marginTop: "10px" }}>
                How to Pull React-Bootstrap Navbar 
                Components to the Right using justify-content-end
            </div>
        </div>
    );
}

export default App;

Output: Here we can observe, the navbar components are aligned to right using ms-auto class utility in React-Bootstrap.

Conclusion

We learnt to pull React-Bootstrap Navbar Components to the Right using 'ms-auto' and 'justify-content-end' utility class provided by Bootstrap. Both are very easy methods to implement and understand. Choose the one methods which suits best according to your project structure or frontend layout requirements.