CSS float-right not working in Bootstrap 4 Navbar
Solution 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>
Solution 2
Bootstrap 5 (update 2021)
The Bootstrap 5 Navbar still uses flexbox, but the concept of right and left, have changed to start and end for new RTL support. Therefore, the class names have changed...
-
float-right
-->float-end
-
float-left
-->float-start
-
ml-*
-->ms-*
-
pl-*
-->ps-*
-
mr-*
-->me-*
-
pr-*
-->pe-*
BUT, remember floats don't work with flexbox. The best approach for right alignment in the Navbar is to use ms-auto
(margin-left: auto) or justify-content-end
.
Bootstrap 4
The original answer no longer works in Bootstrap 4, 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).
Solution 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>
Jake Scervino
Updated on May 27, 2021Comments
-
Jake Scervino almost 3 years
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-content-end" bootstrap 4 class, along with using "float: right !important;" in my CSS file, and it still won't work.
Here is the HTML for the navbar of my website:
<div id="navbar" class="navbar navbar-fixed-top"> <div class="container"> <div class="row"> <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> </div>
And here is the CSS:
#navbar { box-shadow: 0px 0px 11px #000; padding: 0; } #navbar .navbar-brand { font-size: 1.6em; font-weight: bold; color: #9CCC58; }
I'm relatively new to the Bootstrap 4 framework, so it's possible that I might just be making a dumb mistake, but hopefully someone can help me. :(
-
Jake Scervino over 6 yearsI have that code and it still doesn't work. And oops sorry I forgot to add that div when I was pasting my code in my question but the extra div is there in my original code
-
Tayyab Hayat over 2 yearsThis solved my issue with the tip
right => start
andleft => end
using bootstrap 5