Decreasing space in-between navbar elements Bootstrap-5

Question

This is what im aiming for (Ignore fancy background) This is what ive got: How would I decrease the space between the elements, and centre it in the navbar? Heres my code so far - Using bootstrap 5

    <nav class="navbar bg-primary mt-3">
        <div class="container-inline navbar-brand">
            <img src="img/logo.png" class="ms-4" width="60" alt="Logo">
            <a class="text-light ms-5 fw-bold">TEST</a>
        </div>
            <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>
    </nav>

Answer 1

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.