Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Using Bootstrap Components Building a Navbar

peichunliu
peichunliu
33,154 Points
Posted by peichunliu
peichunliu
33,154 Points

Why does the ml-auto not work on aligning the last item to the right side of the page?

Hi, I am confused why it does not work as same as the bootstrap's example? Is there something wrong with my code? Thanks. http://v4-alpha.getbootstrap.com/utilities/flexbox/#with-justify-content

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
      <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse d-flex justify-content-start" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#speakers">Speakers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#schedule">Schedule</a>
          </li>
          <li class="nav-item">
            <a class="nav-link ml-auto" href="#">Presented by TreeHouse</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

3 Answers

Jullien Selby
Jullien Selby
16,320 Points
Jullien Selby
Jullien Selby
16,320 Points

Hope this helps.

--

    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary">
        <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <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="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Speakers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Schedule</a>
        </li>
      </ul>
      <a class="navbar-brand ml-sm-auto" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
    </div>
      </div>
</nav>
peichunliu
peichunliu
33,154 Points
peichunliu
peichunliu
33,154 Points

Hi Jullien, Thanks so much for replying. My first snippet used the Flexbox instead of floats just as the teacher's note. But when I applied the codes which I referred to the Bootstrap's website, found it didn't work as expected, so although finally, I removed the Flexbox's part I still wonder if there was something wrong. Thanks.

Frans Teja
Frans Teja
8,175 Points
Frans Teja
Frans Teja
8,175 Points

This is because you're wrapping it with ul element. So that makes ul as the flex item in the div navbar container, I assume? And you need set display : flex at the ul element.

I hope my answer helps your problem. Cheers.

peichunliu
peichunliu
33,154 Points
peichunliu
peichunliu
33,154 Points

Hi Frans, thanks for replying. Unfouturely, it still doesn't work. I found an alternative for this project but thought it might not be perfect. 

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#speakers">Speakers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#schedule">Schedule</a>
          </li>
        </ul>
      </div>
        <a class="navbar-brand ml-auto" href="#">Presented by TreeHouse</a>
    </div>
Sarah Montoro
Sarah Montoro
843 Points

How is it wrapped in an ul element if it's after the closing ul tag?

Jullien Selby
Jullien Selby
16,320 Points
Jullien Selby
Jullien Selby
16,320 Points

Hi Sarah Montoro, I believe Frans was referring to the first code snippet for this question. If you look at where the a tag is located in that first code snippet, it's wrapped in the ul tag.