Tips for aligning nav-items in a Bootstrap 4 navbar: center one and right align another

I'm struggling with the code snippet below:

<div class="container-fluid big-logo bg-light" id="big-logo">
    <nav class="navbar nav-pills flex-column justify-content-center flex-sm-row navbar-expand-lg navbar-light bg-white">
        <a href="{% url 'home' %}" class="nav-item">
            <img alt="logo" src="{% static 'img/fuck.jpg' %}" style="max-height:40px;">
        </a>
        <a href="{% url 'cart' %}" class="nav-item">
            <div>
                <img alt="cart" class="card-title" src="{% static 'img/cart.png' %}" style="max-height:30px;">
                <span class='badge badge-warning' id='lblCartCount'> {{ obj }} </span>
                <h6 class="card-subtitle text-muted">Cart</h6>
            </div>
        </a>
    </nav>
</div>

Here is what the current result looks like compared to the expected result:

https://i.sstatic.net/Ql1r9.png

I've attempted several solutions but nothing seems to work. Any ideas on how I can achieve the desired outcome?

htmlcsstwitter-bootstrapbootstrap-4sass

Answer №1

To align the anchor tag to the right, use the classes m-auto and ml-auto. It is recommended to remove the justify-content-center class from the nav element:

<div class="container-fluid big-logo bg-light" id="big-logo">
            <nav class="navbar nav-pills flex-column flex-sm-row navbar-expand-lg navbar-light bg-white">
                <a href="{% url 'home' %}" class="nav-item m-auto">
                    <img alt="logo" src="{% static 'img/fuck.jpg' %}" style="max-height:40px;">
                </a>
                <a href="{% url 'cart' %}" class="nav-item ml-auto">
                    <div>
                        <img alt="cart" class="card-title" src="{% static 'img/cart.png' %}" style="max-height:30px;">
                        <span class='badge badge-warning' id='lblCartCount'> {{ obj }} </span>
                        <h6 class="card-subtitle text-muted">Cart</h6>
                    </div>
                </a>
            </nav>
</div>

Answer №2

Implement the mx-md-auto class in a navbar example: (execute code on full screen mode)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <div class="navbar-collapse collapse nav-content order-2">
            <ul class="nav navbar-nav">
            </ul>
        </div>
        <ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
            <li class="nav-item"><a class="nav-link" href="#">Center</a></li>
            <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </ul>
        <div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
            <ul class="ml-auto nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Right</a>
                </li>

            </ul>
        </div>
    </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

The legend color in a JavaFX StackedBarChart does not adhere to the chart color CSS styling

Within my application, using JDK version 1.8u51, I need to assign specific colors to different data categories in a StackedBarChart. To accomplish this, I have created the following CSS: .root{ -fx-ok-color: darkgreen; -fx-critical-color: darkblue ...

csschartsjavafxlegend

Troubleshooting JavaScript's onchange Function Dysfunction

Here is the code snippet I am working with: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery-2.2.1.min.js"></script> <script src="slike.js"></script> ...

javascriptjqueryhtml

The Kadwa font's right arrow character appears overly broad

I am having an issue with the Google Font Kadwa in InDesign, specifically when using it to generate a right arrow (→). After loading the font onto my website, I noticed that the arrow appears to be too wide for my liking. @import url('https://fo ...

csswebfontstypographygoogle-fonts

employing the CSS `:empty` pseudo-class to conceal an element

Upon using chrome for inspection, I stumbled upon the following code snippet: <div class="entry-content"> <p>We .... </p> </div> <footer class="entry-footer"> </footer> Occasionally, this f ...

css

Is my directive not displaying the desired content on the HTML page?

I'm facing an issue with a custom directive in AngularJS that is supposed to draw a circle using SVG. However, upon loading the page, the circle doesn't appear, and even the text within the template is not showing up. What could be causing this ...

htmlangularjssvgangular-directiveangular-template

Validating fields using JavaScript and HTML

I'm having an issue with the code below because it only allows me to log in with the user and password from the last position of the arrays. I want it to let me login with each user and their corresponding password, for example, user at position 1 wit ...

javascripthtmlfor-loopif-statement

Default behavior in Fullcalendar 6 allows for rendering links on both days of the month and weekdays

Is there a way to customize the rendering of days and weekdays in Fullcalendar React? Currently, they are displayed as links by default (<a>{dayContent}</a>), but I'm looking to have them rendered as <div> or <span>. Any sugges ...

javascripthtmlreactjsfullcalendarfullcalendar-6

display border around a div when a hyperlink is selected

Can someone help me with showing the top border on a footer when a link is clicked, and hiding it when the same link is clicked again? I've tried using display:none;, but it's affecting the functionality. Any assistance would be greatly appreciat ...

javascriptjqueryhtmlcssborder

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in ...

javascriptcssgoogle-chromepolymerpolymer-2.x

What is the method for linking events across multiple objects?

When a user clicks on the confirmation button in a Twitter Bootstrap modal window, I trigger a deletion action on the page. The modal contains two buttons - one for canceling the action and another for confirming it. Once the user confirms the delete act ...

javascriptjquerytwitter-bootstrapjquery-events

PHPUnit ensuring consistent HTML structure regardless of spacing differences

I have a script that generates HTML through the command line and I want to write unit tests for it using PHPUnit. It's important to note that this HTML is not intended for display in a browser, so Selenium isn't the right tool for testing it. My ...

phphtmlunit-testingphpunit

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

javascripthtml

Using JQuery's onChange event triggers actions based on the current values of input fields. However, in some

I am currently tackling an issue with a module that is designed to automatically select the only valid value from a Multi- or Single selection field when there is just one valid option and an empty choice available. Initially, everything was working smoot ...

javascriptjqueryhtmlacl

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

Splitting a text string in PHP: Separating song titles from artist names

Here is a snippet of PHP code that retrieves artist and title information: <?php //get artist/title info $artist = $_GET['artist']; $title = $_GET['title']; //create a temp file to store values for AJAX script $r = fopen("temp_titl ...

phphtmlajax

The dialog encountered an error due to an invalid function

I am currently encountering a TypeError: $("").html("This dialog will show every time!").dialog is not a function. This error occurs when the page is loaded using load() in a div on the index page. I have made sure to include the necessary jQuery scripts o ...

javascriptjqueryhtmlajaxload

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

Certain functionalities of Bootstrap may not be functioning properly within an Angular 6 project

I followed a tutorial from a source to integrate bootstrap into my newly developed angular 6 project. After compiling, I encountered no errors either in the 'ng console' or in the browser's developer tools. Although the buttons are well-co ...

htmlangularbootstrap-4

The flexslider isn't updating slides when clicking on thumbnails

Recently, I incorporated a CSS code to display an overlay when hovering over the thumbnails in my flexslider slideshow. However, after adding this code, I noticed that clicking on the thumbnail does not produce any action. .flex-control-nav li{ positi ...

javascriptjquerycssflexslider

Incorporating Javascript into HTML

I have developed a script to randomly change the size of an element, but I am struggling to understand how to incorporate it using HTML or iframe code for randomization. <script type="text/javascript"> var banner1 = ["728", "90"]; var banne ...

javascriptjqueryajaxhtml