Centering components of Navbar

Question

I want to create a Navbar with the containing elements place at the center. I am using React, Bootstrap 4 and reactstrap.

I have the following reactstrap JSX code:

  <div>
    <Navbar className="d-flex justify-content-center" color="faded" light expand="md">
      <NavbarBrand href="/">reactstrap</NavbarBrand>
      <NavbarToggler />
      <Collapse navbar>
        <Nav navbar>
          <NavItem>
            <NavLink href="/components/">Components</NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
          </NavItem>
          <UncontrolledDropdown nav inNavbar>
            <DropdownToggle nav caret>
              Options
            </DropdownToggle>
            <DropdownMenu >
              <DropdownItem>
                Option 1
              </DropdownItem>
              <DropdownItem>
                Option 2
              </DropdownItem>
              <DropdownItem divider />
              <DropdownItem>
                Reset
              </DropdownItem>
            </DropdownMenu>
          </UncontrolledDropdown>
        </Nav>
      </Collapse>
    </Navbar>
  </div>

The problem is that the elements of the Navbar are aligned to the left instead of in the center:

After looking here, I thought this would work:

className="d-flex justify-content-center"

However, it doesn't work.

Also, after looking here, I tried changing the second line to this:

    <Navbar xs="6" sm="4" color="faded" light expand="md">

However, this doesn't work either.

So, how I make the elements of the Navbar centered.

Try to add a `width` of 100% ? – Striped Feb 10 '18 at 14:23 — Striped, Feb 10 '18 at 14:23

score 1 · Answer 1 · answered Feb 10 '18 at 15:52

The reason why justify-content-center isn't as useful in this case as it would have normally been is the collapse class. It's designed for the navbar-toggler and is controlled via JavaScript.

There's an easy and elegant way to solve the problem if you don't need the toggler.

In case you do want to use the toggler (and I assume you do), there is a quick and easy solution too. Though this one is slightly less elegant. Here's what you can do in this case:

You duplicate the element for the NavbarBrand and put it inside the div with the collapse class.
Add the classes ml-auto d-none d-lg-block to this "NavbarBrand2" element and mr-auto to the following element containing your nav links. ml-auto means "margin-left:auto" and mr-auto means "margin-right:auto". So, that will center both on larger screens. d-none will hide "NavbarBrand2" by default and d-lg-block will show it from large (lg) screen size and up.
Add the d-lg-none class to the original "NavbarBrand1" to hide it on screens that are at least lg i.e. when the other one kicks in.

Here's the working HTML code snippet (adjust your React code accordingly to produce that HTML output or similar output based on your needs):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-lg-content-center">
    <a class="navbar-brand d-lg-none" href="#">NavbarBrand1</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" id="navbarSupportedContent">
        <a class="navbar-brand ml-auto d-none d-lg-block" href="#">NavbarBrand2</a>
        <ul class="navbar-nav mr-auto">
            <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="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

Since you didn't mention what behavior you want on smaller screens, I assumed that you want the default i.e. the NavbarBrand left-aligned and the toggler right-aligned.

Centering components of Navbar

1 Answers1