CSS Float-Right Not Working in Bootstrap 4 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>

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.

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

Bootstrap 4 navbar unable to shift items to the right

You need to use justify-content-between on your div (navbar-collapse) and put the login and sign-up ul outside the first ul

<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">

Demo:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Connect4</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
    <ul ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sign up</a>
      </li>
    </ul>
  </div>
</nav>

Unable to float elements in Bootstrap navbar

just add <div class="col-md-12"></div> below to section it'll be works

.navbar{    background-image: cornflowerblue;}#mainNav{    border: 5px solid black;    margin: 3%;    background-color: white;}body{    background-color: grey;}#navContent{    background-color: white;    margin: 3%;}#final{    border: 5px solid black;    margin: 3%;    background-color: white;}#searchForm{    margin: auto;}#test{    text-align: center;    border: 5px solid black;    float: right;}
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head><body>    <div class="container-fluid">        <section class="row" id="mainNav">        <div class="col-md-12">            <nav class="navbar rounded">                <a class="navbar-brand" href="#">Brand</a>
                <form class="form-inline" id="searchForm" role="search">                    <div class="input-group">                        <input class="form-control" type="text" placeholder="Search">                        <div class="input-group-btn">                            <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>                        </div>                    </div>                </form>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">                    <i class="fa fa-bars"></i>                </button>                <div id="test">                    <div class="collapse navbar-collapse" id="navToggler">                        <ul class="nav navbar-nav">                            <li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>                            <li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>                        </ul>                    </div>                </div>            </nav>            </div>        </section>        </div>        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>    <script src="js/index.js"></script>        </body>

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">

Related Topics

Make a Parent Div Webkit-Filter Not Affect Children

Download Webpage and Dependencies, Including CSS Images

*Ngif Else If in Template

What Are All The Differences Between Src and Data-Src Attributes

How to Center and Crop an Image to Always Appear in Square Shape with CSS

How to Prevent Text from Overflowing in CSS

Why Use Definition Lists (Dl,Dd,Dt) Tags for HTML Forms Instead of Tables

Svg Background Image Position Is Always Centered in Internet Explorer, Despite Background-Position: Left Center;

Stop Lastpass Filling Out a Form

Put Text at Bottom of Div

Fixed Footer in Bootstrap

Dashed Border Not Showing in Firefox

Context.Getimagedata() Operation Is Insecure

Block Level Elements Inside Inline Elements

Server Side Includes Alternative

Random Querystring to Avoid Ie Caching

HTML Tab Interface Using Only CSS

Decrease Bitrate on Wav File Created with Recorderjs


Leave a reply



Submit