Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar.

https://i.stack.imgur.com/PDvSv.png

Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX

Code:

<nav class="mb-1 navbar navbar-expand-sm navbar-dark bg-dark sticky-top">

    <div class="container">
        <!-- Collapse content -->
        <div class="justify-content-end">
            <!--Links-->
            <ul class="navbar-nav">
                <li class="nav-item {% if current == 'Allocate' %}active{% endif %}">
                    <a class="nav-link" href="/">Allocate Stocks</a>
                </li>
                <li class="nav-item {% if current == 'Portfolio' %}active{% endif %}">
                    <a class="nav-link" href="/portfolio">Portfolio</a>
                </li>
                <li class="nav-item {% if current == 'Transactions' %}active{% endif %}">
                    <a class="nav-link" href="/transactions">Transactions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if current == 'Leaderboard' %}active{% endif %}" href="/leaderboard">Leaderboard</a>
                </li>
                <li class="nav-item {% if current == 'Rules' %}active{% endif %}">
                    <a class="nav-link" href="/rules">Rules</a>
                </li>
                <li class="nav-item {% if current == 'Resources' %}active{% endif %}">
                    <a class="nav-link" href="/resources">Resources</a>
                </li>
                <li class="nav-item justify-content-end">
                    <a class="nav-link" href="/logout">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

How can I achieve this alignment?

htmlcsstwitter-bootstrap

Answer №1

If you want to achieve this, make sure to include two .navbar-nav elements instead of just one. You can then add either the mr-auto class to the first one or the ml-auto class to the second.
To ensure proper styling, don't forget to apply the following CSS to their immediate parent:

display: flex;
flex: 1 0 100%;
align-items: center;

It appears that you have removed the default styles applied by the classes collapse and navbar-collapse.

For a detailed example of correct navbar markup, refer to Bootstrap documentation here: Navbar.

You can also view your updated code snippet here on CodePen.

Answer №2

To align content to the right, you should rearrange your code as shown below:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top" aria-label="Main Menu">
    <div class="container">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Link to the left</a>
            </li>
            <li class="nav-item mr-1">
                <a href="#" class="nav-link">Link to the left</a>
            </li>
        </ul>
        <ul class="navbar-nav justify-content-right">
            <li class="nav-item mr-1">
                <a href="#" class="nav-link">To the right</a>
            </li>
        </ul>
    </div> 
</nav>

EDIT: Upon reviewing, I see that my previous solution included unnecessary code for a collapsing navigation. You can simply omit the toggle button and collapse code in your implementation.

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 implement this design using CSS flexbox?

I'm working on designing a simple layout that looks like this: https://i.stack.imgur.com/oCzyV.png Currently, I have the following HTML structure with some variations in class names and additional markup within each element: <div class="site ...

htmlcsslayoutflexbox

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

LovelyStew - various cards containing numerous nested attributes

In an attempt to view all "cards" on the California State Lotto page: There are X draws, each represented by a 'Card': Sample Card <div class="card"><div class="card-header" id="heading-1"><button class="accordion--toggle w-100 ...

pythonhtmlweb-scrapingbeautifulsoup

Disappear text gradually while scrolling horizontally

There is a need to create a special block that displays fading text on horizontal scroll. However, the problem is that the block is situated on a non-uniform background, making the usual solution of adding a linear gradient on the sides unsuitable. Click ...

javascripthtmlcssfade

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

Creating two dropdown menus from a PHP array

Currently, I have a PHP array structured like this. $food = array ("Fruits" => array("apple","mango","orange"), "vegies"=> array ("capsicum", "betroot", "raddish"), "bisucuits"=>array("marygold", "britania", "goodday")); My task is to create two ...

phpjqueryhtmlajax

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Maintaining image ratio on the entire screen

I am in search of a way to create a webpage that includes the following elements from top to bottom: Full-screen width image/background-image (maintaining aspect ratio) Navigation bar (aligned at the top right of the image) Some text Another full-screen ...

htmlcss

Can the line "as is" be included in HTML code?

Can I incorporate the following JavaScript and JSON expressions directly into HTML code? CONTRATE > 50 && SALINC <= 50 || RETAGE >= 50 { "CONTRATE": 0, "SALINC": 0, "MARSTATUS": "single", "SPOUSEDOB": "1970-01-01" } I want to be able to ...

javascripthtml.netjson

Display a div in front of another using Material UI when hovering

Is there a way to display a black transparent div in front of a <MediaCard/> when hovering over it? Below is the code snippet I am using with Material UI: <Box> <Typography variant='h3'>Home Page</Typography> < ...

cssreactjsmaterial-ui

Enable my textbox to interpret the html img tag

Is there a way to display emoji images instead of emoji symbols when inserting them into my textbox? For example, can I show the image representation of ':)' instead of just the symbol itself? ...

javascripthtml

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Tips for creating animated images with a mask or clip using HTML, CSS, and jQuery

I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip First method using Mask : View working script at http://jsfiddle.net/2Aecz/ or below & ...

jqueryhtmlcssanimationhtml5-canvas

Incorporate an MP3 audio track into an image

Greetings, I have an image and I am interested in embedding the associated MP3 file directly onto the image instead of having it displayed separately below. Is this achievable? Thank you Best regards, Gary <!doctype html> <html> <head&g ...

htmlmp3embedaudio

Why is it that vanilla HTML/JS (including React) opts for camelCase in its styling conventions, while CSS does not follow the same pattern

Each type of technology for styling has its own set of conventions when it comes to naming properties, with camelCase and hyphenated-style being the two main options. When applying styles directly to an HTML DOM Node using JavaScript, the syntax would be ...

javascripthtmlcssconventions

Title appears to be left aligned instead of centered

My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...

htmlcss

Tips for loading a webpage directly to the center instead of the top position

Is there a way to make the page open at a specific div halfway down the page instead of starting from the top? Here is an example: <div id="d1"> <div id="d2"> <div id="d3"> <div id="d4"> <div id="d5"> <div id="d6"> Do ...

javascripthtmlcss

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

htmlinternet-explorerbuttonjsf-2primefaces

Knockout text binding does not automatically update the width

Recently, I encountered a bug in an ongoing project where the user name was appearing within another element until hovered over with a cursor. Upon further investigation, I discovered that this issue stemmed from the project's usage of Knockout.js. I ...

jqueryhtmlcssknockout.js