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

mohammed mayat
mohammed mayat
4,228 Points
Posted by mohammed mayat
mohammed mayat
4,228 Points

move link to right

i want to move presented by treehouse to the right while keeping rest of the links to the left, how would i do that i tried using navbar-right class but it has not worked

<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-inverse bg-inverse navbar-fixed-top navbar-fluid"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Logo Goes Here</a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#home">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#speakers">Speakers</a> <a class="nav-item nav-link" href="#scedule">Scedule</a> <ul class="nav navbar-nav navbar-right"> <a class="nabvar-brand" href="https://teamtreehouse.com/home">Prersented by Treehouse</a> </ul> </div> </div> </nav>

4 Answers

Michael Johnson
Michael Johnson
6,340 Points

@mohammed mayat

I think you are looking for this <ul class="navbar-nav mr-auto">

<div class="collapse navbar-collapse" id="navbarNav">
   **<ul class="navbar-nav mr-auto">**
        <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>
        <a class="navbar-brand" href="http://www.teamtreeehouse.come">Presented by Treehouse</a>
    </div>
  </nav>
runa verse
runa verse
409 Points
runa verse
runa verse
409 Points

Do you know why we need to put mr-auto on the ul class when we want .navbar-brand flush right? <ul class="navbar-nav mr-auto"> Shouldn't it be: <a class="navbar-brand mr-auto">?

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Do ml-auto. This moves the links to the Right.

<ul class="navbar-nav ml-auto">

And to place four links on the left and one on the right I have posted the answer. You can find it here.

Karan Nahar
Karan Nahar
16,157 Points
Karan Nahar
Karan Nahar
16,157 Points

Hi! runa. I found a simple solution. Give your container a .flex-row-reverse class. This reverses your normal horizontal order of brand on the left and place it to the right.

<div class="container flex-row-reverse">

Refer to the bootstap utilities docs here. (https://getbootstrap.com/docs/4.0/utilities/flex/).
Bootstrap 4 use Flexbox. Learn more about flexbox and its layout properties. You will get more control over bootstrap with flexbox knowledge.

runa verse
runa verse
409 Points
runa verse
runa verse
409 Points

Oh interesting! Thanks for letting me know about this Karan!

Huzaifa Sajjad Malik
PLUS
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points
Huzaifa Sajjad Malik
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points

Mate do post your code as mentioned in the Markdown cheat sheet this way the code is difficult to read.never the less if you want to move a specific link to move to right then give it a class and in that class define the float property to right.

.floatRight
{
   float:right;
} 

<a class="floatRight" href="#">;