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?
3
Answers
You can add
justify-content-between
className to the outerNavBar
, like this:You may want to read more about bootstrap’s flex utilities in its webpage.
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:
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.
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:
Make sure that you’re also importing the Bootstrap CSS in your project!