CODEWITHSUNDEEP
reactjsreact-bootstrapreact-bootstrap-nav
sakuo
sakuo

Reputation: 1

In react-bootstrap, align the link to the right of the screen

I'm currently creating a NavBar component in react, and here's what I have so far:

const NavBar = () => {
  return (
    <Navbar className="bg-body-tertiary">
      <Navbar.Brand href="#home">Home</Navbar.Brand>
      <Nav >
        <Nav.Link href="#About">About</Nav.Link>
        <Nav.Link href="#Resume">Resume</Nav.Link>
      </Nav>
    </Navbar>
  );
};

Currently, I have the Home button aligned to the left of the screen, but so are the About and Resume tabs. How can I make it so that About and Resume are on the right?

Upvotes: 0

Views: 44

Answers (2)

hachondeoro
hachondeoro

Reputation: 43

You can move the Nav element which includes the About and Resume links to the right of the Navbar by utilizing the ml-auto class. This class applies margin-left: auto, which pushes the Nav to the right:

import React from "react";
import { Navbar, Nav } from "react-bootstrap"; // import necessary components

const NavBar = () => {
  return (
    <Navbar className="bg-body-tertiary">
      <Navbar.Brand href="#home">Home</Navbar.Brand>
      <Nav className="ml-auto">
        <Nav.Link href="#About">About</Nav.Link>
        <Nav.Link href="#Resume">Resume</Nav.Link>
      </Nav>
    </Navbar>
  );
};

export default NavBar;

Make sure that you're also importing the Bootstrap CSS in your project!

Upvotes: 0

maxpsz
maxpsz

Reputation: 604

You can add justify-content-between className to the outer NavBar, like this:

const NavBar = () => {
  return (
    <Navbar className="bg-body-tertiary justify-content-between">
      <Navbar.Brand href="#home">Home</Navbar.Brand>
      <Nav >
        <Nav.Link href="#About">About</Nav.Link>
        <Nav.Link href="#Resume">Resume</Nav.Link>
      </Nav>
    </Navbar>
  );
};

You may want to read more about bootstrap's flex utilities in its webpage.

Upvotes: 0

Related Questions