Bootstrap Float Left And Float Right

I'm very new to bootstrap so this is probably an easy question for most. I have a navbar, want two nav items and an input field to be on the left side of the navbar. With the two r

Solution 1:

You can use the following solution:

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"rel="stylesheet"/><navclass="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top"><divclass="container"><aclass="navbar-brand"href="index.php">L'amour</a><buttonclass="navbar-toggler navbar-toggler-right"type="button"data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarResponsive"><!-- left menu --><ulclass="navbar-nav"><liclass="nav-item"><aclass="nav-link"href="order.php">Contact Us</a></li><liclass="nav-item"><aclass="nav-link"href="order.php">Testimonial</a></li><liclass="nav-item"><inputclass='form-control'type='text'name='search'placeholder='Search for wedding...'></li></ul><!-- right menu --><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="order.php">Order Wesbite</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownBlog"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
         Account
          </a><divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownBlog"><aclass="dropdown-item"href="signIn.php">Login</a><aclass="dropdown-item"href="sign-up">Sign up</a><aclass="dropdown-item"href="homeUser.php">Account details</a><aclass="dropdown-item"href="logout.php">Logout</a></div></li></ul></div></div></nav>

Solution 2:

Separate menu into two ul left and right use class mr-auto for left and my-0 for the right one

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
      <divclass="container"><aclass="navbar-brand"href="index.php">L'amour</a><buttonclass="navbar-toggler navbar-toggler-right"type="button"data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarResponsive"><ulclass="navbar-nav mr-auto"><liclass="nav-item float-left"><aclass="nav-link float-left"href="order.php">Contact Us</a></li><liclass="nav-item float-left"><aclass="nav-link float-left"href="order.php">Testimonial</a></li><liclass="nav-item"><inputclass='form-control'type='text'name='search'placeholder='Search for wedding...'></li></ul><ulclass="navbar-nav my-lg-0"><liclass="nav-item "><aclass="nav-link float-right"href="order.php">Order Wesbite</a></li><liclass="nav-item dropdown float-right"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownBlog"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
             Account
              </a><divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownBlog"><aclass="dropdown-item"href="signIn.php">Login</a><aclass="dropdown-item"href="sign-up">Sign up</a><aclass="dropdown-item"href="homeUser.php">Account details</a><aclass="dropdown-item"href="logout.php">Logout</a></div></li></ul></div></div></nav>

https://jsfiddle.net/raj_mutant/v00oy85h/

Solution 3:

To achieve this you should wrap your nav items in different ul

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"rel="stylesheet"/><navclass="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top"><divclass="container"><aclass="navbar-brand"href="index.php">L'amour</a><buttonclass="navbar-toggler navbar-toggler-right"type="button"data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarResponsive"><ulclass="navbar-nav"><liclass="nav-item float-left"><aclass="nav-link float-left"href="order.php">Contact Us</a></li><liclass="nav-item float-left"><aclass="nav-link float-left"href="order.php">Testimonial</a></li><liclass="nav-item"><inputclass="form-control"type="text"name="search"placeholder="Search for wedding..."></li></ul><ulclass="navbar-nav ml-auto"><liclass="nav-item "><aclass="nav-link"href="order.php">Order Wesbite</a></li><liclass="nav-item dropdown"><aclass="nav-link dropdown-toggle"href="#"id="navbarDropdownBlog"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
         Account
          </a><divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownBlog"><aclass="dropdown-item"href="signIn.php">Login</a><aclass="dropdown-item"href="sign-up">Sign up</a><aclass="dropdown-item"href="homeUser.php">Account details</a><aclass="dropdown-item"href="logout.php">Logout</a></div></li></ul></div></div></nav>

Note: View the snippet in full screen

Solution 4:

You are forgetting to use clearfix class to parent class that contain float-left or float-right class