Bootstrap nav layout

1

I’m using Bootstrap to build a nav bar, and I’m having trouble achieving my desired layout. What I’d like is to have the logo on the left, (done), the nav links on the right, (done), and a welcome message also on the right, butted up against the nav links. Unfortunately, the div that holds the nav links takes up the maximum available space, pushing the welcome message far to the left, up against the logo, and I can’t figure out how to get it to only take up as much space as the links within it. Here’s some example code:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  
  <a class="navbar-brand" href="#">LOGO</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>

  <p class="mb-0 welcome ml-auto">Welcome, User!</p>
  
  <div class="collapse navbar-collapse border border-danger" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">NavLink<span class="sr-only">(current)</span></a>
      </li>
    </ul>
  </div>
  
</nav>

And here’s a codepen of that same code, if you’d like to tinker with it.

Any help would be much appreciated!

2

Did you look at the flex utilities?

Try adding flex-md-grow-0 to the navbar-nav container div

<div class="collapse navbar-collapse border border-danger flex-md-grow-0" id="navbarSupportedContent">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">NavLink<span class="sr-only">(current)</span></a>
    </li>
  </ul>
</div>

You may have to adjust the breakpoint I just set it to md

3

I did look into the flex and display utilities, but I wasn’t able to find what I was looking for. It looks like your solution works great! Thanks for your help.