Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Juan Antonio Roig Bernat
Juan Antonio Roig Bernat
5,543 Points

navbar-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
Keith Kelly
21,326 Points

It 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.

Juan Antonio Roig Bernat
Juan Antonio Roig Bernat
5,543 Points

Yeah! 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
Keith Kelly
21,326 Points

No 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-auto on the ul element 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.

Conrad Turuk
Conrad Turuk
5,144 Points

Set 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
Austin Whipple
29,687 Points

The 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
Juan Antonio Roig Bernat
5,543 Points

I meant by using bootstrap classes. But as you say works fine.

Thank you :)