Bootstrap navbar icons not aligned properly

Question

I'm trying to add three icons at the right corner, search, notification bell and user. I do not want to collapse since this is for an Electron desktop application and the navbar needs to be fixed.

<nav class="navbar navbar-dark bg-dark">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
            </a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">
              <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
            </a></li>
          </ul>
        </nav>

In doing so, the icons appear one after another vertically which widens the navbar. How do I correct this? I am relatively new to Bootstrap.

Answer 1

Give display: inline-block to ul and li tag.

 ul.navbar-nav, li.nav-item{ display: inline-block; }

 <nav class="navbar navbar-dark bg-dark"> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/search.svg" alt=""> </a></li> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/bell.svg" alt=""> </a></li> <li class="nav-item"><a class="nav-link p-2" href="#"> <img src="node_modules/bootstrap-icons/icons/person.svg" alt=""> </a></li> </ul> </nav>

Answer 2

There is a Stack Overflow answer that addresses your issue.

Extracting the code from this answer you will be able to custom your navbar properly:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="navbar-brand" href="#">Navbar</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/search.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="">
              </a></li>
              <li class="nav-item"><a class="nav-link p-2" href="#">
                <img src="node_modules/bootstrap-icons/icons/person.svg" alt="">
              </a></li>
        </ul>
</nav>

The only thing that matter here will be the mr-auto in the first ul . You'll have more explanation on this page to understand how it works.

Answer 3

On the ul element change the class to just nav instead of navbar-nav & add class d-flex

    <nav class="navbar navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav d-flex">
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/search.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/bell.svg" alt="" />
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#">
            <img src="node_modules/bootstrap-icons/icons/person.svg" alt="" />
          </a>
        </li>
      </ul>
    </nav>

Here's a codesandbox where it's working https://codesandbox.io/s/weathered-wildflower-86fv8