Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    To align the "About" and "Resume" links to the right side of your Navbar component in React with React-Bootstrap, you can utilize the className prop and CSS classes provided by Bootstrap. Here’s how you can modify your NavBar component:

    import { Navbar, Nav } from 'react-bootstrap';

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>
  );
};

export default NavBar;

    In this updated version:

    *I added the justify-content-between class to the Navbar component. This class from Bootstrap’s flex utility will push the "About" and "Resume" links to the right side of the Navbar.

    *The bg-body-tertiary class remains for the background color, assuming you have defined this class in your CSS or Bootstrap theme.

    Login or Signup to reply.
  3. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search