How to Align Navigation Bar Items to the Right in Bootstrap 4

I need some help with bootstrap. I've looked at various discussions on this topic and tried numerous solutions, but I still can't get it right. I want the logo to be on the left and the navigation links aligned to the right. Here's what I've attempted so far:

1. Placing the ul (.navbar-nav) inside a div with flex-container class and setting flex-direction: row-reverse;

2. Adding the mr-auto class to the ul (.navbar-nav)

3. Trying out the ml-auto class on ul (.navbar-nav) 

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5d425d5d485f03475e6d1c031c1b031d">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light boxed" style="margin-top:30px;">
  <a class="navbar-brand logo" href="#"><img src="images/techno_vision_logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Eyeglasses <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sunglasses</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Lenses</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Offers</a>
      </li>
    </ul>
  </div>
</nav>

Website link:

htmlcssbootstrap-4navbar

Answer №1

In order to make the necessary changes, you must update the class name within the 

<ul class="navbar-nav mr-auto">
tag.

The required modification involves replacing the class mr-auto with ml-auto.

To have a clearer view of the code snippet, please refer to the full-screen mode below.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dedf2ededf8efb3f7eeddacb3acabb3ad">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light boxed" style="margin-top:30px;">
  <a class="navbar-brand logo" href="#"><img src="images/techno_vision_logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Eyeglasses <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Sunglasses</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact Lenses</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Offers</a>
      </li>
    </ul>
  </div>
</nav>

This response aims to assist you in resolving the specified issue effectively.

We appreciate your attention and cooperation. Thank you.

Answer №2

By incorporating justify-content: flex-end into the div with the id of navbarNavDropdown, I successfully aligned the items to the right side of the display. Additionally, the removal of mr-auto from the inner ul element resolved any issues, resulting in a functional layout.

Answer №3

To create some space on the right and left side, adjust the padding value in the following code snippet. If you do not want any spacing, leave the padding as 0:

.navbar { padding: 0; }

Next, change this line of code:

<ul class="navbar-nav mr-auto">

to:

<ul class="navbar-nav ml-auto>

By implementing these changes, your issue should be resolved.

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

Is it possible to display one division on top of another with a transparent opacity effect in HTML?

I'm struggling with designing web pages and currently working on a page on codepen.io using code from this link. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...

javascriptjqueryhtmlcssresponsive-design

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

Conceal or style the filter panel in a DT datatable

Here is an example to consider: library(DT) L <- 10 datatable( data.frame( var1 = sapply(1:L, function(x) paste("<X>",paste0(x, letters, LETTERS, "\n", ...

jquerycssrdatatableshiny

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...

htmltypescriptnext.jsreact-props

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

javascriptjquerycsshtml

Best practices for selecting checkboxes and transferring values to another page in PHP/HTML

Apologies for my lack of experience in PHP. I am in the process of creating a project without any knowledge of PHP. I have set up a database with a list of users and can display users based on specific information through a search. Each search query has a ...

javascriptphpjqueryhtml

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

My dropdown is populated with owners from the owners data, but it includes an extra blank option. I need to eliminate this blank option. However, when I make the necessary changes to remove it, the required validator stops working properly. <md-input-c ...

javascripthtmlangularjs

How about creating a fresh variable in Assemble or merging two comparison helpers together?

Is it possible to create a new variable within a partial in Assemble (assemble.io) or combine two comparison helpers? For example: {#is somevar "yes" || anothervar "no"} In my partial, I have HTML that should only display if one of two different variable ...

htmlhandlebars.jsassemble

Firefox failing to display CSS files on web pages

My project is deployed on IIS 7.5 and when trying to access it from a different machine using Firefox, all files are rendered except for the CSS files (although they work fine in IE). I have checked that the MIME type for .css files is correctly set up in ...

cssfirefoxiis-7.5

Can you explain the significance of this?

Some may find this question silly, but I'm curious about the meaning behind certain elements in an ASPX page. For example, when there is code like this: <%@ Page Title="[$TITLES_listevents{uneditable}]" Language="C#" MasterPageFile="~/sitebase ...

asp.nethtml

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Is there a way to render a 2D SVG shape, which is flat and 100% black, in any color across various browsers? ...

csssvg

Function in head not triggering on OnMouseOver event

My goal is to have specific text display on my page when a user hovers over an image, with the text changing for each image. Below is the code snippet for the header section: <head> <title>Indian Spices Page</title> <link rel="s ...

javascripthtmlfunction

I need to create a login form using Angular - what steps should I follow?

I'm currently in the process of developing a login form for my website. Utilizing angular, express, and mongoDB. Below is the login function controller I have implemented: loginUser: (req, res) => { User.findOne({ username: req.bo ...

htmlangularmongodbexpress

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

Text successfully inserted into the input field using Xpath

I need help with the following issue: I am trying to use Selenium to verify if an input field contains a specific text that has been manually entered. Here is an example of an input field with the value '50': <input type="text" class="value ...

phphtmlseleniumxpathweb

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

css

When attempting to showcase an image within an Angular form, the error message "Form control with unspecified name attribute lacks a value accessor" is displayed

I have a scenario where I am overlaying icons on an image within my ngForm. The goal is to allow users to drag the icons and save their new location when the form is submitted. Everything works as expected, but I encounter a pesky error whenever the page l ...

htmlangular

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml