Bootstrap 4 navbar understanding

Question

I am new to this and developing in general. I am taking a webdev course, currently learning CSS through Bootstrap. The videos were created during bootstrap 3, but I am trying to learn on Bootstrap 4. Currently, I am trying to understand navbars and I am having difficulty understanding how elements align right. This is mostly from bootstrap documentation, except that the button is replacing a search element. I get that when I take off mr-auto in the ul tag then the button is no longer aligned right. How come this mr-auto even applies to the button outside of the ul? I think this answer will help bridge the gap in a lot of my understanding. Thank you in advance for the help.

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <button>Click</button>
  </div>
</nav>

Edit: Thanks so much everyone. This makes way more sense now.

score 1 · Answer 1 · answered Aug 30 '18 at 02:45

I am going to do the best i can to explain it. I might not get it 100% right, but it's worth a shot. mr-auto sets a margin to the right of the UL block. Thus when the class is there, it pushes the elements below it to the right.

the yellow block in this picture is what mr-auto does: dev tools image

Think of every element as a block. So the UL structure is a block of code, and if it is assigned right margin to it, it will push the other blocks over.

I hope this helps!

score 1 · Answer 2 · answered Aug 30 '18 at 02:46

1

mr-auto is just a CSS class that sets an elements margin-right property to auto. This is not what is causing your button to be on the right is that it comes after the unordered list which is "pushing" it to the right

answered Aug 30 '18 at 02:46

reusablePants

175
1
10

score 0 · Answer 3 · answered Aug 30 '18 at 05:55

mr-auto is a utility class which helps control alignments in flex items. By default, flex items have no auto margin.

The lines <nav class="navbar navbar-expand-lg navbar-light bg-light"> and <div class="navbar-collapse collapse" id="navbarSupportedContent" style=""> in the navbar markup have a display property of flex which is what aligns the block level items horizontally.

The utility class mr-auto helps push the items to the right and there is another class ml-auto which pushes items to the left.

Take a look at this illustration in the official bootstrap docs, it will help yo understand better.

Carol Skelly · Answer 4 · 2018-08-30T10:58:47.717

"How come this mr-auto even applies to the button outside of the ul?"

It's because the Bootstrap 4 Navbar is flexbox (display:flex). Therefore the contents of the Navbar (the brand, the navbar-collapse div and toggle button) naturally display from left to right, but don't expand to fill the width. However, the navbar-collapse has been set to width:100% which forces it to fill across the entire width of its Navbar container.

Here I've added a background color so you can how the navbar-collapse fills the width of the navbar:

The navbar-collapse is also display:flex, so it's children also follow flexbox rules. The children of your navbar-collapse is the navbar-nav ul and the button. When auto-margins are used on flexbox children, the are pushed to the left, right or center. When you add, mr-auto (an auto margin on the right side) to the navbar-nav ul, it forces the button all the way to the right. When it's remove the items go back to naturally sticking to the left side.

Here I've added the blur background color to the navbar-nav so you can how it sticks to the left side of the navbar-collapse:

So, if you visualize the auto-margin on the right side of the navbar-nav, it makes sense that it's pushing the button to the right.

Demo: https://www.codeply.com/go/oTjFSG1g29

Also see:
Bootstrap 4 align navbar items to the right
Bootstrap NavBar with left, center or right aligned items

Bootstrap 4 navbar understanding

4 Answers4