How to Evenly Space Navbar Elements in Bootstrap 4

How to evenly space Navbar elements in Bootstrap 4

Use the .nav-fill to equally space the items, and w-100 (width:100%) class to make it full width...

https://www.codeply.com/go/djlHAC3uux

<ul id="menu-main-nav" class="navbar-nav nav-fill w-100">
     <li id="menu-item-42" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-42"><a href="XXX" class="nav-link">HOME</a></li>
     <li id="menu-item-963" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-963"><a href="XXX" class="nav-link">SERVICES</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">ABOUT US</a></li>
     <li id="menu-item-40" class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="XXX" class="nav-link">CONTACT</a></li>
</ul>

http://getbootstrap.com/docs/4.0/utilities/sizing/

Changing the space between each item in Bootstrap navbar

You can change this in your CSS with the property padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Also you can set margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

How to add space inbetween nav items in bootstrap

To separate two navbar areas in bootstrap4, I used this:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">
        <img src="logo.png" width="192" height="44" alt="Sample Image">
        Bootstrap Navbar Demo
      </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">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link mx-3 active" href="/page1">Page 1</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 2</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 3</a>
        </div>
        <div class="navbar-nav">
          <a class="nav-item nav-link mx-3" href="/logout">Logout</a>
        </div>
      </div>
    </nav>

Basically the buttons have margins of mx-3 to separate them a bit. The mr-auto pushes the logout button to far right.

With https://stackoverflow.com/a/18600623/999943 this is pretty nice.

Hope that helps.

Decreasing space in-between navbar elements Bootstrap-5

When working with Bootstrap's Navbar, only use the supported content. Follow the guidance from the docs...

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.

Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

So, following this guidance for your Navbar...

1. Assuming you want it to always remain horizontal, add the navbar-expand class.
2. The nav-links should be contained inside a navbar-nav (supported content)
3. Use the spacing/flex utility classes. To center the navbar-nav, use w-100 to create 3 equal width navbar divs/sections. Then justify-content-center on the navbar-nav to center content of the middle section.

   <nav class="navbar navbar-expand bg-primary mt-3">
        <div class="container-fluid">
            <div class="w-100">
                <img src="//placehold.it/60x30" class="ms-4" width="60" alt="Logo">
                <a class="navbar-bran text-light ms-5 fw-bold">TEST</a>
            </div>
            <div class="navbar-nav justify-content-center">
                <a class="nav-link text-light">One</a>
                <a class="nav-link text-light">Two</a>
                <a class="nav-link text-light">Three</a>
                <a class="nav-link text-light">Four</a>
            </div>
            <div class="w-100">
            </div>
        </div>
   </nav>

Demo

---

Since Bootstrap 5 still uses flexbox like Bootstrap 4, aligning Navbar content hasn't changed between the 2 versions.

Equal widths in navbar bootstrap 4

You would have to set widths based on the number of items to do that. There is no flexbox property that will manage it for you.

.nav-fill .nav-item {
    flex: 1 0 20%; /* 5 items of 20% each */
    text-align: center;
    border:1px solid red;
}

Codepen Example

Justifying Bootstrap navbar-nav list items with even space

Try this css in your bootply:

.navbar-nav {
    text-align: justify;
    min-width: 100%;
}
.navbar-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.navbar-nav li {
    display: inline-block;
    float:none;
}

---

Related Topics