Ways to move Bootstrap 4 navbar list items to the right side?

Is there a way to move the li elements to the right without causing issues with the toggler or navbar?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

I attempted to use some CSS code to shift the li elements, but it resulted in issues with the toggler and navbar.

 @media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    .pull-right();
    &:first-child {
      .pull-left();
    }
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

If you have any suggestions on how to achieve this without causing disruptions to the layout, I would appreciate it. Thank you.

htmlcssbootstrap-4

Answer №1

To achieve the desired result, add the class justify-content-end and remove the class mr-auto:

<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 justify-content-end" id="navbarSupportedContent">
    <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

(This solution was tested without your custom CSS)

Answer №2

apply this new style

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
  text-align: right;
 }

remove the old styles

 @media (min-width: 768px) {
 .navbar-nav {
  float: left;
  margin: 0;
  }
  .navbar-nav > li {
    .pull-right();
      &:first-child {
    .pull-left();
    }
   }
   .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
   }
  }

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

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

htmlcssprintingmedia-queries

Unable to integrate an if/else statement into the JSON reply

Working with an API to retrieve data and display images from it. I am attempting to implement an if/else statement that will show photos if the search term yields results in the response, and display a message indicating no results if it does not. Curren ...

javascriptjqueryhtmljsonapi

Transferring input data between two HTML files in Electron with a secure login feature

Currently, I am in the process of developing an Electron app that facilitates communication between users through socket.io. The app includes a login screen where users can enter their registered email and password to access the main menu. For testing purp ...

javascriptjqueryhtmlnode.jselectron

How can I add navigation dots to my slider?

I've been experimenting with my slider and I managed to make it slide automatically. However, the issue is that there is no option to manually navigate through the slides. I am looking to add navigation dots at the bottom so users can easily switch be ...

javascriptjqueryhtmlcssslider

When jQuery adds new elements, their CSS may not be applied accurately

One issue I encountered is using jQuery to dynamically add new elements, only to find that the CSS isn't being applied correctly to the newly added element. To illustrate this problem, I created a jsFiddle. In the example, there are differences in sp ...

jquerycsstwitter-bootstrap

The Bootbox dialog.modal('hide') function is not effectively hiding the modal

I am facing an issue with bootbox.js modals. I am trying to utilize bootbox.dialog to pause the UI while an Ajax request is in progress and awaiting a response. Everything works fine when using dialog.modal('hide'); within bootbox.alert with conf ...

javascriptjqueryhtmlmodal-dialogbootbox

I attempted all possible solutions, but unfortunately could not achieve success. I encountered difficulty in adding the data-offset and even attempted implementing jQuery to no avail

I would greatly appreciate any assistance. Despite my efforts with jquery, I have been unable to make it work. Below is the code that I attempted to use: <body data-spy="scroll" data-target="#navbar" data-offset="80"> ...

bootstrap-4

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

cssreactjstypescriptnext.jsstyled-components

What is the proper way to apply a background color to the entire body using CSS?

I'm facing an issue with getting the background color to cover the entire body of my webpage. Currently, it only captures a certain size and when there is scrolling on the window, two shades of colors appear. I want the background color to span the en ...

htmlcssangular

Why do images show up on Chrome and Mozilla but not on IE?

I have tested the code below. The images display in Chrome and Mozilla, but not in IE. The image format is .jpg. Can someone please assist? bodycontent+='<tr class="span12"><td class="span12"><div class="span12"><img class="span ...

javascriptjqueryhtmlcssjsp

Avoid the div from covering the scrollbar within its containing parent div

Background: Trying to resolve an issue mentioned here: https://github.com/likeastore/ngDialog/issues/94 Challenge: If you open this plnkr link: http://plnkr.co/edit/qKJiNwyivqJVCAtyhwYR?p=preview and attempt to hold and drag the scrollbar with the mouse, ...

angularjscssangularjs-directiveng-dialog

Adjusting webpage background with JavaScript

I've been struggling with this for the past six hours and can't seem to get it right. I've checked out various solutions on Stack Overflow, but nothing seems to work. What am I missing here?!? My html5 page doesn't have a background an ...

javascriptjqueryhtmlcss

An error has occurred: sendEmail function is not defined

There seems to be a simple issue here that needs my attention before diving into PHP tasks. I plan on using PHPMailer this time around. I've been attempting to learn how to submit a form on localhost for the past week, and now I'm going to try i ...

javascriptjqueryhtml

Add the CSS code to the <head> section, even though the CSS styles are located within

According to the analysis from Webpagetest.org, it appears that The CSS for http://mypage.com/howitworks is located in the document body: The link node for http://mypage.com/design_header.css should be relocated to the document header. The design_header ...

phphtmlcss

Is there a way to display an input box inline with other content on a webpage?

My goal is to display text and an input box on the same row, however, I am facing a challenge. The input box keeps jumping to the next line even though there is enough space for it on the same row as the text. I searched through the documentation but found ...

csstwitter-bootstrap

Is it possible to utilize both CSS assets and the public folder within a single application?

I am facing the challenge of migrating a legacy application to utilize the Rails 3 asset pipeline. With over 100 stylesheets being imported on a template by template basis using a content_for :stylesheets block, compiling them into a single stylesheet i ...

cssruby-on-railsruby-on-rails-3

Using Angular, you can easily add a <div> dynamically to all elements that share a class

In order to implement a solution, I am tasked with adding a new div element with the class '.cart-list-value .delete-product', which will contain a background image, to all elements that have the class .cart-list-item. Although I successfully man ...

htmlangulardomangular-renderer2

Issue with Firefox mobile's camera functionality

I am facing an issue with my web app for mobile devices where I am trying to display the mobile camera using Firefox mobile browser. I am using nodejs with express as a server and connecting to the server via localhost with my smartphone. Although Firefox ...

javascripthtmlnode.jsexpress

Ensuring the state is correctly updated upon form submission in React JS

Is there a way to reset the state to blank after submitting the form? I attempted to clear it again upon submission, but the state still retains its value. How can I revert the state back to its initial state after finishing the submission? state = { ...

htmlcssreactjs

Looking to send a variable from jQuery using AJAX to a Perl file and then accessing the value on the CGI page

Here is the HTML code snippet I am working on: following is my template code : <html> <head> <script type = "text/javascript" src = "jquery.min.js"></script> <script> var counter = 0; var txt1 = "group_save"; function addN ...

jqueryhtmlajaxperlcgi