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 Basics Using Bootstrap Components Building a Navbar

Posted by Obe Juarez
Obe Juarez
6,357 Points

Order

So how can i move the links to the right and keep the nav bar brand on the left? ive tried giving the links an order-2 and the nav bar brand an order-1 but the navbar brand is the only one that moves

Andreas Nyström
Andreas Nyström
8,887 Points
Andreas Nyström
Andreas Nyström
8,887 Points

Can you provide a snippet of the code?

Obe Juarez
Obe Juarez
6,357 Points

So its esentially what Guil coppied and pasted from bootstrap . i just want to know how i would grab the navbar items (or links) and move those to the right side

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <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="#">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="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </nav>

2 Answers

Robert Ballew
Robert Ballew
3,168 Points
Robert Ballew
Robert Ballew
3,168 Points

Set the left margin to auto in the navbar-nav.

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav ml-auto"><!--this one here-->
          <a class="nav-item nav-link" 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="#schedule">Schedule</a>
        </div>
      </div>
Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

There are many ways to rearrange the layout, but one simple one would be using "float":

nav { float: right; }