Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS float-right not working in Bootstrap 4 Navbar [duplicate]

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. :(

like image 588
Jake Scervino Avatar asked Aug 03 '17 21:08

Jake Scervino


People also ask

How can make navbar float right in bootstrap 4?

ml-auto class of Bootstrap 4 to align navbar items to the right. The . ml-auto class automatically gives a left margin and shifts navbar items to the right.

How does float right work CSS?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

How do I align navbar brand to right?

Move the brand above the navbar-header and give it the class navbar-right. This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.

How do I extend the navigation bar in CSS?

You can use the CSS "height" property to force the navigation bar to extend to the bottom of the page. The feature makes the blog or website layout more evenly display the different sections of your page.


1 Answers

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.

See this question for details


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

like image 97
Zim Avatar answered Oct 03 '22 18:10

Zim