CSS float-right not working in Bootstrap 4 Navbar

Question

I\'m trying to get my nav links to float to the right of my navbar, but I can\'t get it to work. I\'ve tried using the \".float-right\", \"float-xs-right\", and \"justify-co

Answer 1

You can use .justify-content-between on the parent .row to move the flex children to the far edges of the row.

#navbar {
    box-shadow: 0px 0px 11px #000;
    padding: 0;
}

#navbar .navbar-brand {
    font-size: 1.6em;
    font-weight: bold;
    color: #9CCC58;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar" class="navbar navbar-fixed-top">
    <div class="container">
        <div class="row justify-content-between">
            <div class="navbar-brand">
                <img src="images/logo.png" width="88px">
                Scervino Lawn Service
            </div>
            <ul class="nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>

Answer 2

Update 2018 - Bootstrap 4.0.0

The original answer no longer works in Bootstrap 4.0.0, and it's not good practice to use Bootstrap's .row in the navbar component. The .row should only be used for grid columns.

Now that Bootstrap 4 is flexbox, one way to align navbar components is using the auto-margin utility classes, such as ml-auto which is a shortcut for CSS margin-left:auto. This can be used to push the nav to the right...

https://www.codeply.com/go/ZAGhCX5lpq

<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>

Or the flexbox utils like justify-content-between can be used on the container inside the navbar...

<div id="navbar" class="navbar navbar-expand navbar-fixed-top">
    <div class="container justify-content-between">
        <div class="navbar-brand">
            <img src=".." width="88px">
             Scervino Lawn Service
        </div>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="about">About Us</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="contact">Contact</a>
            </li>
        </ul>
    </div>
</div>

Just notice that in this case justify-content-between works because there are only 2 navbar components (navbar-brand and nav).

Answer 3

I tried with Bootstrap 4.0.0 Alpha 6 and it works, here's the example: https://repl.it/JwMq/0

I just added this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>

And a extra </div>