Is there a way to move a list item element to the right within a navigation tabs bar using Bootstrap 5?

I've been scouring the internet for tips on how to move my "User information" and "Logout" li elements to the right of my navbar using bootstrap, but I can't seem to find a solution. As a beginner with bootstrap, this task has proven to be quite challenging for me.

Below is my code:

<!--  NAVBAR  -->
 <ul class="nav nav-tabs">
  <li class="nav-item">
   <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Inserisci NC</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Modifica NC</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Elimina NC</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">User information</a>
  </li>
  <li class="nav-item">
   <a class="nav-link" href="#">Logout</a>
  </li>  
 </ul>
cssbootstrap-5

Answer №1

Include another ul.nav.nav-tabs within the existing nav-tabs and apply the same classes to it as well.

  • ml-auto : positions it to the right
  • border-0: eliminates the border as the outer nav-tabs already have a border.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Insert NC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Edit NC</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Delete NC</a>
  </li>
  <ul class="nav nav-tabs ml-auto border-0">
    <li class="nav-item ml-auto">
      <a class="nav-link" href="#">User details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Logout</a>
    </li>
  </ul>
</ul>

Utilize two ul.nav.nav-tabs separated by space.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-between border-bottom">
  <!--  NAVBAR  -->
  <ul class="nav nav-tabs border-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Insert NC</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Edit NC</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Delete NC</a>
    </li>
  </ul>
  <ul class="nav nav-tabs border-0">
    <li class="nav-item no-border">
      <a class="nav-link" href="#">User details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Logout</a>
    </li>
  </ul>
</div>

Answer №2

Instead of adding another set of navigation tabs, if you're using Bootstrap 5, you can simply utilize the ms-auto class to align the nav-items to the right...

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e4e9e9f2f5f2f4e7f6c6b3a8b6a8b6abe4e3f2e7b4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Insert NC</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Edit NC</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Delete NC</a>
    </li>
    <li class="nav-item ms-auto">
        <a class="nav-link" href="#">User details</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Logout</a>
    </li>
</ul>

Take note: In Bootstrap 5, the ml-auto class from Bootstrap 4 has been replaced with ms-auto.

View Demo

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

The width of the Bootstrap shadow container is not optimized for large viewports

Having recently started using bootstrap (less than six hours of documentation/development time), I encountered an issue where the width of my shadow container extends too far on smaller screen sizes. Any screen size above 991px leaves unwanted white space ...

htmlcssbootstrap-5

When an SVG image is embedded, its color may not change even after being converted to an inline SVG

I've inserted an SVG using an img tag. When hovering over it, I want the fill color of the SVG to change. I attempted to convert the SVG to inline SVG following this method, but it doesn't seem to be working as expected. No console errors are b ...

javascriptjqueryhtmlcsssvg

Mobile-style menu with full desktop height

I am currently working on developing my first custom WordPress theme from scratch. My goal is to design a mobile-style menu that can also be displayed on desktop screens. To achieve this, I have used jQuery to implement the sliding effect. You can view a ...

jqueryhtmlcsswordpress

Use CSS3 to hide the <li> elements initially and make them appear when the <li> is clicked on

Click here How can I hide the "subline" line from the list and make it visible when the user clicks on the "sub" line, pushing the other lines down? I'm hoping for a solution that doesn't involve using Js or JQuery. Thank you in advance! ...

htmlcss

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

htmlcssmarginline-height

Guide to modifying WordPress version 4.5 with HTML pages

https://i.sstatic.net/5zA5S.png I am encountering issues with my Wordpress website. I have installed it on Softcald in cPanel and now I want to edit my Wordpress using HTML. However, I am having trouble finding the editing option. My Wordpress version is ...

htmlcsswordpresscpanel

jQuery does not support animations for sliding up or down

I'm struggling to conceal a navigation element once the top of the #preFooter section is scrolled to. In order to make the nav element mobile-friendly, I have designed both the .tab-wrap and .tab-wrap-mobile. To enable these elements to slide away w ...

javascriptjqueryhtmlcss

How come the text is not centered when I use text-align:center; on my class "text5"?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> ...

htmlcsscenter

Enhancing react-to-print functionality for optimal performance across various browsers and mobile platforms

Currently, I am developing a sample react-to-print resume template to be included in a larger portfolio website. While testing the page on Chrome and Edge browsers on a laptop, everything seems optimized. However, there are issues when using Firefox; the b ...

cssreactjsreact-to-print

The background color of social media links spills over onto other links, creating a messy overlap

I have been trying to confine the teal hover effect within the boundaries of my social media links. Despite adjusting padding, heights, and widths using CSS properties, the hover effect still extends beyond the right border. Here is how it appears without ...

htmlcss

svg rect mistakenly appearing as a rounded polygon

I found a cool SVG pie chart on this codepen that I want to modify. The original chart is 50 x 50 and animated, but I want to make it 20 x 20. To resize the pie chart, I tried changing the width, height, radius, and center points in the code. I also adjus ...

csssvg

Updating the background image of a React app according to each component

After researching extensively and attempting various solutions, I am still struggling to make my app function correctly. My goal is to display a different background image depending on which component is being rendered on the screen. The app is built using ...

cssreactjsmaterial-uibackground-image

Leverage Bootstrap to apply margins to a container

I'm creating a new blog platform and I need some advice on how to properly position the blog post div in relation to the date div so it displays with the appropriate gaps. https://i.stack.imgur.com/oLbCq.jpg https://i.stack.imgur.com/CqV7b.png Here& ...

htmlcsstwitter-bootstrap

Experiencing difficulties positioning svg text path in the center using CSS on desktop devices

I've looked into other SVG text questions, but I'm struggling to understand my mistake. Currently, I'm working on a live site at and implementing the following code: <svg class="svg-width desktop" style="margin:auto"> <path ...

csssvg

Ways to prevent a background image from repeating in an HTML email without relying on CSS

I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...

htmlcss

Find all the child elements within a specific class using CSS

Looking for a method to effortlessly apply styles to all elements within a specific class without repeating code like this: .element-wrapper .coin-box{ margin: 10px; float: left; } .element-wrapper .platform{ margin: 10px; float: left; } .eleme ...

htmlcss

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

javascriptjqueryhtmlcss

ReactJs: difficulty in resetting input field to empty string

I have an application using React v 0.13.1 (Old version). I am struggling to update my input field to "" after retrieving the updated value from the database. Scenario: I am updating the input fields by clicking on the button named "Pull&qu ...

javascripthtmlcssreactjs

Having trouble centering elements correctly with Bootstrap 5

Just dipping my toes into the world of bootstrap and experimenting with some code. Encountered an issue when trying to center elements properly within columns: <div class="container"> <div class="row"> <div class= ...

cssbootstrap-5

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

htmlcss