Bootstrap 4 navbar aligning

HTML-CSS
1

I’m trying to have my brand on the left, another image centered and links on the right, but my image does not want to center. Any ideas? Current code below.

<nav id="topNav" class="navbar navbar-expand-md navbar-dark rounded-top" style="background-color: #825867; background-image: linear-gradient(#502635, #825867) ">  
   <div class="container-fluid" >
       <a class="navbar-brand mr-auto" href="#"> <img  src="images/brand.png" />  </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavLinks">
        <span class="navbar-toggler-icon"></span>
        </button>
        
       <img src="images/bff-logo.svg" width="470" height="120" class="d-none d-lg-block mx-auto"/>
       
       <div class="navbar-collapse collapse" id="navbarNavLinks">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>        </ul>
    </div>
  </div>
</nav>```
2

is your Nav tag in it’s own container? Also I don’t see a row designation.

3

No, its not in it’s own container. Does that mean it needs to be? I guess I didn’t see any examples of the Navbar having a row in it.

4

Okay so Bootstrap layout is based on containers. you can have containers within containers but you need to define them. They are part of the bootstrap grid system. I like to have this page open when working on a bootstrap project:

You need to have everything in a container, but after that you don’t need more. Think of a container as your page. You then need to define your rows, and then your column. Nav should be in a row and then given a column width.

5

Interesting I haven’t seen many examples of the Navbar being inside of a row. I’m not saying that’s wrong but I thought everything was done using flexbox now.

6

If you’re using bootstrap, you still need to use their classes to utilize their flexbox code. Otherwise you have to build the CSS yourself.