Navbar alignment issue: justify-content-between not functioning properly

The justify-content-between property is not functioning as expected for the navbar. I need the navigation list to expand and cover the entire space with equal spacing between the items.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <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="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <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>
  </div>
</nav>

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 customized notification icon featuring a count of notifications

I am trying to add a notification icon to my website similar to Facebook. On Facebook, the notification icon is displayed in the top left corner with a number indicating the total notifications. I would like to replicate this feature on my site as well. Be ...

htmlcss

The mobile version is experiencing issues with the functionality of the responsive sidebar

Having an issue with the sidebar on this page. In the responsive version, particularly on smartphones, I can't get it to go underneath the content. The sidebar stays connected to the left but doesn't wrap around. Here is the CodePen link. If t ...

cssresponsive-design

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

Issue Description: I am facing an issue on the order page where I need to link the "Continue" button to a booking page. After reaching the booking page, I expect users to be able to navigate between the two pages seamlessly even when they use the browser& ...

javascripthtml

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

javascripthtmlcss

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

My situation involves a HTML table within a form that is being populated with Handlebars. I need to be able to select certain rows in the table using checkboxes, and upon form submission through a POST request in an Express.js framework, I require the JSON ...

javascriptjqueryhtmlexpresshandlebars.js

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

javascriptjsonhtml

How can you modify the Bootstrap width to activate the responsive design?

I currently have the following HTML code snippet: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale= ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Styling a div element in CSS so that it adjusts its size to fit its

How can I make a div element adjust to its content and also break the line so that the next element appears below it? I attempted setting the display property to inline-block, but then the div no longer breaks the line... Normally, it breaks the line, but ...

css

Embedded video player is failing to display and play the video file

Currently, I am in the process of developing a PHP backend for my mobile application. One specific requirement involves displaying and playing a video file that is hosted. This is the approach I have taken: $data[$i]['video'] = '<vide ...

phphtml

Updating the background color using typescript

Before transitioning to angular development, I had experience working with vanilla Javascript. I encountered a challenge when trying to modify the css properties of specific elements using Typescript. Unfortunately, the traditional approach used in Javascr ...

javascriptcssangulartypescript

The HTML webpage is optimized for desktop and tablet viewing, but has difficulty displaying correctly on mobile phones

Just starting out with HTML and created a website using HTML and CSS that is now live. It looks good on desktop and tablet (iPad) but not so great on mobile devices. Tried different solutions, including viewport settings, to fix the issue with no success. ...

htmlcssmobile

Selenium: Locating the element correctly, yet unable to perform interactions with the input field

When trying to interact with an input field using the provided script: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_ ...

pythonhtmlseleniumdomxpath

Why is a <script> tag placed within a <noscript> tag?

Lately, I've been exploring various websites with unique designs and content by inspecting their source code. One site that caught my attention was Squarespace, which had blocks of <script> tags within a <noscript> tag: <!-- Page is at ...

javascripthtmlnoscript

Acquiring the value of an input box in VBA through HTML

Can someone provide guidance on how to retrieve the value from an input box on an Internet Explorer page using VBA? I have tried various solutions but none seem to work. Below is the HTML code I am working with. I specifically need the value of the bolded ...

htmlvbainputbox

Include a hyperlink to a website that was created with the help of Photoshop

Is it feasible to incorporate a hyperlink into a website that was designed using Photoshop templates? In the past, creating templates in Photoshop and then adding links with tools like Dreamweaver was common practice. I believed that dynamically adding li ...

phphtmlweb-deployment

toggle back and forth between two div elements

I am trying to create a toggle effect between two divs, where clicking on one will change its border and header color to red while the other div disappears. I have tried using an IF statement in my JavaScript code, but it is not working as expected. Can so ...

javascriptjqueryhtmlcss

Customizing event colors in Full Calendar

My interactive calendar is created using : $('#calendar').fullCalendar({ height: 300, //............. events: jsonData, month: firstMonth }) I am looking to dynamically change the color of an event based on certain conditions ...

javascriptjquerycsscalendarfullcalendar

The border is not displaying for the Child Div element

I am struggling with a webpage that has two nested divs. Despite trying all the suggestions I have found, I still cannot get the inner div to display its border. On the other hand, I have noticed that the parent div's border shows up without any issu ...

csshtmlborder

Creating a Dropdown Menu with an IEnumerable SelectList

I'm encountering an issue when trying to choose an item from my dropdown list and submit it. An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but wasn't handled in user code. Additional informat ...

c#htmlasp.netasp.net-mvc