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
Juan Antonio Roig Bernat
5,543 Pointsnavbar-right alignment of menu items
Hi there!
How should I align the menu <ul> to the right without force it with a "float:right!important" class?
I have tested with some bootstrap classes like "navbar-right", "pull-right". "text-right" into the <ul navbar> item but doesn't work...
--
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav NAVBAR-RIGHT">
<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>
</nav>
--
2 Answers
Keith Kelly
21,326 PointsIt looks like in the latest v4.0.0.alpha.6 that you can use the ml-auto class and that should push it to the right.
If you are using v4.0.0.alpha.5 or earlier you should be able to use float-xs-right and that will float it to the right on any device size.
Conrad Turuk
5,144 PointsSet display to inline-block and try that? I found this link below, that should help out:
http://stackoverflow.com/questions/16278114/right-side-align-without-float
Austin Whipple
29,725 PointsThe text-align: right; declaration is important in this case. Inline elements will follow the text alignment style options so simply setting display: inline-block; without the text-align won't do much.
Juan Antonio Roig Bernat
5,543 PointsI meant by using bootstrap classes. But as you say works fine.
Thank you :)
Juan Antonio Roig Bernat
5,543 PointsJuan Antonio Roig Bernat
5,543 PointsYeah! Magic happens! :D thank you very much. Do you know where in bootstrap documentation is that explanation? Thanks for your time Keith. I really appreciate :) Saludos!
Keith Kelly
21,326 PointsKeith Kelly
21,326 PointsNo problem Juan, glad I could help.
The update is referenced on the navbar page. Under the 'How it Works' section the third bullet indicates that since the contents are now built with flexbox you can use utility classes to position elements.
In the first example on the page you can see how they used
mr-autoon theulelement to push the form to the left.I was just looking over the changelog for v4.0.0.alpha.6 and it looks like they removed all of the float classes and classes that used float to use use flexbox by default instead.