What is the best way to align list items both to the right and left in my navigation

How can I justify list items both right and left in my navigation bar?

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <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 mx-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <a href="#"><img src="images/logo.png"></a>
                <li class="nav-item">
                  <a class="nav-link" href="#">CONTACT</a>
                </li>
              </ul>
            </div>
          </nav>

Image

javascripthtmlcssnavbar

Answer №1

Would you like to achieve a similar look?

.navbar-nav{
  display: flex;
  justify-content: space-around;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
            <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 mx-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <a href="#"><img src="images/logo.png"></a>
                <li class="nav-item">
                  <a class="nav-link" href="#">CONTACT</a>
                </li>
              </ul>
            </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

"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be gr ...

htmlcssflexboxfullscreencenter

Tips for adding text to your d3 force layout

Looking to incorporate text into a force layout using SVG. I've created an svg group and added a circle successfully, but having trouble with the text. Here's the code snippet: var node = svg.selectAll("g") .data(measures.nod ...

javascriptjqueryd3.jssvg

Passing arguments from the command line to an npm script

The scripts section in my package.json is currently set up as follows: "scripts": { "start": "node ./script.js server" } This allows me to use npm start command to initiate the server. All working well so far. However, I ...

javascriptnode.jsnpm

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

javascripthtmlangularionic2ionic3

What is the best way to retrieve the URL from a specific HTML tag?

I am attempting to extract all URLs that have id='revSAR' from the provided HTML tag using a Python regex: <a id='revSAR' href='http://www.amazon.com/Altec-Lansing-inMotion-Mobile-Speaker/product-reviews/B000EDKP8U/ref=cm_cr_dp ...

pythonhtmlregexhtml-parsingpython-3.3

The Ionic framework is showing an error that says "'LoginCtrl' is not defined as a function."

I encountered an issue while attempting to set up simple navigation in my ionic application. The error message I received was: "Argument 'LoginCtrl' is not a function, got undefined in the Ionic. What could be causing this problem?" Here is a sn ...

javascriptangularjscordovaionic-framework

Database-Driven Ajax Information Display

https://i.sstatic.net/GE8RI.pngI retrieved some data from the database and successfully displayed it after an ajax call. However, one of the variables contains array data that was saved using the implode function. The data looks like (a,b,c,d). The curren ...

javascriptphpajaxlaravellaravel-5

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

As a beginner in TypeScript, I am currently working on rendering a page by fetching data from getStaticProps. The code snippet I am using for this purpose is: import React, {FormEvent, useState} from "react"; import { InferGetStaticPropsType } fr ...

javascriptreactjstypescriptnext.js

How many characters are in SCEditor? Let's calculate and display the count

Currently, I am utilizing the real simple WYSIWYG editor SCEditor for my website. I am curious about how I can precisely determine the current number of characters in its textarea and display them below it? Although I posted a question on GitHub, it seem ...

javascriptjqueryjquery-pluginswysiwyg

Strategies for handling axios responses within a useEffect hook in Reactjs

Currently, I am working with Reactjs and implementing nextjs. I am facing an issue where I am using Axios for fetching data from an API, but I am struggling to display it on the page. To debug this, I have tried using console.log inside the useEffect fun ...

javascriptreactjsnext.js

Click the mouse to create a unique path from the list items within the <ul> <li> using jQuery

My current listing contains various files and folders: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fon ...

javascripthtmljquery

Using Backbone to Handle Different Data Formats

I have a unique text file containing date-time data in the format below: 2014-03-14T16:32 2014-03-15T13:04 2014-03-16T06:44 ... I want to use this static file as a read-only data source for my backbone collection. However, the current format is not suita ...

javascriptajaxbackbone.js

Trigger a jQuery event when an element is moved to a new line

Is there a way to trigger a jQuery event when an element moves to a new line in the view? I want to hide navigation items and run additional JavaScript code when this happens. Any ideas on how to achieve this? Here's how my navigation appears in a wi ...

javascriptjquery

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

Is it possible for my Java Applets to be compatible with Chrome 45?

Our web application utilizes three Java Applets for various functions. We are aware that Chrome 45 will no longer support NPAPI. Upon visiting Oracle's page, it is stated that Java Plugin depends on NPAPI. I have tested my Applets on Chrome 43 and 4 ...

javajavascriptgoogle-chromeapplet

The onRendered function fails to load all data in the template

I'm dealing with a frustrating bug that I just can't seem to fix. I've been attempting to load all users using Users.find() into one of my layout sub-templates, but for some reason, it's not working as expected. Instead of loading all u ...

javascriptmeteorsubscription

JavaScript: Specialized gravity diagram

To better understand the issue I am experiencing, please take a look at the image linked below: The concept and problem I am facing is related to creating a weight chart similar to the one shown in the picture or on this site , here is the description of ...

javascriptajax

What is the correct way to initialize a variable that will store the output of setInterval?

While examining a question, I came across someone's solution that proposed updating the code below. In the comments section, it was suggested: Instead of setting this.tm to undefined, we should set it to 0. Since it's a time interval, it shoul ...

javascriptreactjssetinterval

Getting the checked values from an AngularJS Material checkbox

<md-checkbox ng-repeat="program in ctrl.programs" ng-model="ctrl.programsSelected[program.id]"> {{program.name}} </md-checkbox> Checked Items: {{ctrl.programsSelected | json}} Current Output: Checked Items: [null,true,true,true,null,true, ...

javascriptangularjsarrayscheckboxselected

Having trouble aligning page in the center with flexbox and styled components

Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips? Let me share with you my Blog Component import ReactMarkdown from 'react-markdown' impor ...

htmlcssreactjsnext.jsstyled-components