Bootstrap 4 Float-Right Not Working with The Navbar

CSS float-right not working in Bootstrap 4 Navbar

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>

bootstrap float-right not moving element to right

You shouldn't mix floats and flexbox. (Floats are outdated and a pain anyway.) The navbar has flex styles on it, so use that to align its content. The align-self-end class is your huckleberry (or align-self-sm-end to implement your breakpoint). Note that we also use flex-fill on the unordered list element to make it use the extra space.

Make the demo full page to see it in action.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
            <a class="navbar-brand" href="#">Navbar</a>

            <ul class="nav navbar-nav flex-fill">
                <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" href="#">About</a>
                </li>
            </ul>

            <form class="form-inline align-self-end">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </nav>
    </body>

</html>.

Why can't I float my navbar elements to the right when I use bootstrap's css file?

Bootstrap 4 uses display Flex for alignment so floats don't do what they would in a display: block situation. iacobalin is correct that you need to use justify content, but Bootstrap 4 already provides a justify-content-end class that you can add to your nav.navbar and a .nav class that you can add to your ul without needing to add more lines to your custom css.

ul {    /* list-style: none;     margin: 0;     padding:0;     overflow:hidden;*/    background-color: darkkhaki;    color:beige;}
/* li {     display: inline;     float: right; }*/
/*Add the background-color to <ul> instead of each <a> element if you want a full-width background color*/li a {    display: block;    color: beige;    text-align: center;    padding: 14px 16px;    text-decoration: none;}

<html lang="en">
  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    <link type="text/css" rel="stylesheet" href="css/mainnature.css">            
    <title>Nature Conservatory</title>      </head>  
  <body>  <header>   <nav class="navbar justify-content-end">  <ul class="nav">  <li><a href="default.asp">Volunteer</a></li>  <li><a href="news.asp">Support</a></li>  <li><a href="contact.asp">Shop</a></li>  <li><a href="about.asp">Search</a></li></ul> </nav>  </header>       </body>
</html>

bootstrap 4 pull-right is not working on navbar

Can you please try ml-auto instead of mr-auto?

So the ul tag will be like this

<ul class="navbar-nav ml-auto">

pull/float right not working in Bootstrap 4

Bootstrap-4 removed pull-* classes.

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right. - Booststrap

There are a couple of ways to align the last button on the right side.

Use d-flex and justify-content-between classes on the container of the buttons.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">  <button class="btn btn-primary">      Cog    </button>  <button class="btn btn-primary">      Refresh    </button></div>

Float nav items to the right in Bootstrap 4?

Add 'float-xs-right' class to the ul

<ul class="nav navbar-nav float-xs-right">

You can remove 'float-*-right' from the containing nav tag since it's not doing anything there

http://www.bootply.com/OnvcimHYD7