Nav links not being centered in Navbar from React Bootstrap

Question

I'm creating a navbar for a website using React and React Bootstrap and the links are not being centered for some reason.

Here is a picture of what it looks like:

Notice the links "Home" and "Link" are not centered.

Here is the code:

import { Component } from "react";
import 'bootstrap/dist/css/bootstrap.css';
import { Navbar, Nav, NavDropdown, Container } from "react-bootstrap"; 

export default class AppNavbar extends Component {
    render() {
        return (
            <Navbar bg="light" expand="lg" style={{width: "100%"}}>
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
              <Nav className="mx-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        );
    }
}

score 0 · Answer 1 · answered Apr 14 '21 at 14:26

One way to center your navbarSupportedContent portion of your navbar is to add a pseudo-element on the right side of the navbar container and then styling the pseudo-element and the navbar-brand element with flex: 1. That will center the menu items.

This is based on the Method #4 portion of this previous answer: https://stackoverflow.com/a/38948646/1011984

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
@media (min-width:768px) {
    .navbar-container-md::after {
        content:"Right side block so flex can center the ul";
        margin: 0;
        visibility: hidden;
        background: #ddd; /* color is so the element can be seen if hidden is disabled */
        display: flex;
        flex: 1;
    }

    .navbar-brand {
        flex: 1;
        margin-right: 0;
    }
}
</style>

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid navbar-container-md">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse flex-grow-0 align-self-center" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Links</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <p class="text-center">Middle</p>
        </div>
    </div>
</div>

I don’t use React, so I can’t set it up to be used in React, but it should be easy enough to go from the HTML code to what’s needed for React.

Nav links not being centered in Navbar from React Bootstrap

1 Answers1