Utilizing Bootstrap for left and right alignment

Just starting out with bootstrap here, so bear with me. I'm looking to customize my navbar by placing two nav items and an input field on the left side, with the remaining nav items on the right. I've tried playing around with classes like "float-left" and "float-right," but haven't had any success. Any help would be greatly appreciated!

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

Answer №1

Here is a possible solution:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/">Brand Name Here</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
    
      <!-- left menu -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/testimonial">Testimonial</a>
        </li>
        <li class="nav-item">
          <input class='form-control' type='text' name='search' placeholder='Search for something...'>
        </li>
      </ul>
      
      <!-- right menu -->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/order">Order Website</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Account
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
            <a class="dropdown-item" href="/login">Login</a>
            <a class="dropdown-item" href="/sign-up">Sign up</a>
            <a class="dropdown-item" href="/account">Account Details</a>
            <a class="dropdown-item" href="/logout">Logout</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer №2

Divide the menu into two sections, with one on the left and one on the right. Use the class "mr-auto" for the left section and "my-0" for the right section.

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

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

Answer №3

To accomplish this task, it is recommended to enclose your nav elements within separate ul tags.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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

Note: Please view the snippet in full screen for better readability

Answer №4

It's important to remember to add the clearfix class to any parent element that contains a float-left or float-right class

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Currently, I am developing a mobile-based web application that heavily relies on AJAX and Javascript. The process involves users logging in through a login page, sending the data via post to the main page where it undergoes a mySQL query for validation. If ...

phpjavascripthtml

How to prevent default validation message in .NET MVC for time inputs

There is an input field with the type time displayed below: <input type="time" name="visible-start-time" id="visible-start-time" class="form-control half-input" value="@(Model==null?"":Model.StartTime.TimeOfDay.ToString())"/> https://i.sstatic.ne ...

c#htmlasp.netasp.net-mvc

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

See-through Windows on Linux (Electron)

When creating a new BrowserWindow in Electron and using the transparent argument set to true, it typically gives the window a transparent background. However, I have found that this is not the case for Linux based on my knowledge. I have also attempted to ...

javascripthtmlnpmelectron

Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply to my texts: <select v-model="focused_font"> <option value="" disabled selected>Font</option> <option v-for="font in available_fonts" ...

javascriptcssvue.jsvuejs2vue-component

Delete all inputs with identical class except for one using Jquery

In the #tikersDiv div, I am looking to eliminate all input labels that have the same class except for one. Here is the script I have tried without success: $('#tikersDiv').children('label').each(function(i){ let removed = $('#id ...

javascripthtmljqueryinputremovechild

Dependencies in AngularJS factories

I'm currently using AngularJS to extract data from mongodb. I have been attempting to utilize a factory to retrieve this information through the $http method. Despite researching and trying numerous approaches, none seem to work for me. In addition t ...

javascripthtmlangularjsmongodb

Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...

htmlcss

In what situations should the `#` symbol be used to select a DOM element?

There are times when I have to retrieve elements in the following ways: var object = document.getElementById('ObjectName'); Other times, it's done like this: var object = document.getElementById('#ObjectName'); What distinguishes ...

javascripthtmldomgetelementbyid

Tips for reducing the size of input-group-addon in Bootstrap

https://i.sstatic.net/V7ywZ.png <div class="time input-group"> <span class="input-group-addon" id="basic-addon4">Start Time </span> <timepicker [(ngModel)]="mytime" required></timepicker></di ...

cssbootstrap-4

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am currently developing a file upload tool utilizing Valum's Ajax-Uploader as the foundation. The concept is reminiscent of how attaching files works in Gmail. Users should be able to simply drag and drop a file from their desktop into the browser w ...

javascriptcsshtmlwindows-server-2003

Activate Click, or Pop-up Box

I've been attempting to log in to the Udemy site using JavaScript, but I'm having trouble triggering the click action on the "log in" link. Unfortunately, the .click() method doesn't seem to be working when I try to select the element. The l ...

javascriptcsshtml

Customize your HTML dropdown menu to display entries in varying sizes, with the selected entry highlighted prominently

Currently, I am experiencing a problem with HTML drop-down menus. My goal is to maintain a fixed size for the drop-down, but when the user clicks on it, I want the list to be displayed in a larger size to prevent truncation of entries. Interestingly, this ...

javascripthtmlinternet-explorerdrop-down-menu

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

javascriptjquerycsshtml

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss

I am having trouble getting the bootstrap collapse function to work properly on this page. Is there a hidden issue that I am missing?

I've been working on creating a collapsing navbar for smaller windows, but the button responsible for displaying the menu isn't functioning as expected. Essentially, the collapse button is not activating the dropdown menu display. After checking ...

jquerybootstrap-4

Scalable vector graphics require adjustments in scaling and translation, with variations between Chrome and Firefox browsers

I have an SVG diagram with some yellow points represented as circles. <html> <title>Yellow circles</title> <body> <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" ...

htmlcssgoogle-chromefirefoxsvg

Error: ajax is not defined and needs to be declared (repeated twice)

Currently, I have a form that requires processing using Ajax. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <div class="column1"> <form class="form box" action="javascript:networkCheck();" ...

javascriptphpjqueryhtmlajax

Identify line counts and hyphenated lines in a text box with the help of regular expressions

I have been struggling to find a solution to the problem of excluding lines starting with double hyphens when using regular expressions. I need to count single lines separately and double hyphenated lines separately, and display them outside the text area. ...

javascriptjqueryhtmlcss

Issue with font compatibility on PC

As I develop a new online store on Tictail (not yet live, so no link available), I am encountering an issue with the font PT Sans Narrow. While it appears correctly in Safari and Firefox on my iMac, my friend notices display problems when using Firefox and ...

cssfonts