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.

Does this answer your question? [Bootstrap NavBar with left, center or right aligned items](https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items) — Lalji Tadhani, Dec 20 '19 at 13:54

score 1 · Answer 1 · answered Dec 20 '19 at 13:49

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>

Nicolas HERMET · Answer 2 · 2019-12-20T14:17:01.837

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.

score 1 · Accepted Answer · edited Dec 20 '19 at 14:01

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

Bootstrap navbar icons not aligned properly

3 Answers3