Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small" viewport size.

This is my current code:

<nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
    <div class="nav col-sm-6 bg-secondary">
        <DIV class="mx-auto">
          <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
        </DIV>
    </div>
    <div class="col-sm-6">
       <ul class="nav mx-auto float-sm-right text-dark bg-success">
        <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
        <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
        <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
      </ul>
    </div>
</nav>

DISCLAIMER: Excuse the obnoxious backgrounds, they were used for debugging grid responsiveness and determining where to apply utilities.

At a wide viewport, everything appears correct. However, upon shrinking the width, the logo becomes centered while the menu jumps to be left-justified. I attempted applying mx-auto to the line above it (in the DIV), but no change was seen in behavior.

What step did I overlook?

Answer №1

To center align the menu items, simply use the d-flex justify-content-center classes.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
        <div class="nav col-sm-6 bg-secondary">
            <div class="mx-auto">
              <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
            </div>
        </div>
        <div class="col-sm-6">
           <ul class="nav mx-auto d-flex justify-content-center float-sm-right text-dark bg-success">
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
          </ul>
        </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

ECharts - Version 3.1.6 Event Plugin

I am looking for advice regarding the management of two charts with reference to echars from Baidu (version 3.1.6). Is there a way to control both charts by engaging in a click event on one of them? In simpler terms, how can I capture and respond to the c ...

Electron triggers MouseLeave event on child elements

Dealing with mouse hover events can be a bit tricky, especially when working with AngularJS in an Electron-hosted app. Here's the HTML template and script I'm using: HTML: <div id="controlArea" (mouseenter) = "onControlAreaEnter()" ...

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

What is the method for creating a word using lines in programming languages?

I've noticed that many websites, programs, and applications incorporate custom branding using lines and dashes. Is there a tool available to generate this type of styling? I'm trying to print some letters in C++ but I can't seem to find a ge ...

What is causing my Javascript media query for the sidebar to not function properly?

I am working on implementing a sidebar that slides out 250px using JavaScript on the desktop view. However, I want the sidebar to take up 100% width when viewed on mobile devices. Despite my attempts to use Media Queries in JavaScript to achieve this, I am ...

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...

Anomalies observed in label transition while in active state for input field

Can you explain why there is a gap in the label when it's positioned at left:0? I'm aiming to achieve a UI similar to Material design but struggling with label positioning. I've experimented with using translateY(-6px), however, this method ...

How to use Javascript to pause an HTML5 video when closed

I am new to coding and currently working on a project in Adobe Edge Animate. I have managed to create a return button that allows users to close out of a video and go back to the main menu. However, I am facing an issue where the video audio continues to p ...

The confusion between <g:if> and <g:set> features in Grails is causing some issues

I am working with a gsp template that includes a variable. If this variable is true, I want to add an extra button; if it's false, nothing should happen. What could be causing my code to not work correctly? <g:set var="removeButton">{{ removeB ...

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

Artwork expanding incorrectly on HTML canvas

I'm encountering an issue while attempting to draw on an HTML canvas. I've specified 50 circles and multiple lines within a canvas of size 1000x1000 px, but not all circles are appearing as expected. My assumption is that the elements are being ...

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

Displaying outcomes within 2 nested loops

Currently in the process of developing a fast-food website, I have completed most of it except for implementing the menu display feature which will vary for each signed-up takeaway. My approach involves organizing items into categories so that takeaways ca ...

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

Can a stroke in an SVG image be created using a gradient color?

Is it possible to create a gradient in the stroke color of these two lines, currently set to #389967, within this SVG? .chart-three svg .circle-foreground { stroke: #389967; stroke-dasharray: 494.55px 549.5px; stroke-dashoffset: 494.55px; stroke- ...

Ways to align text in the middle and shift it downward?

I'm currently attempting to center the bottom navigation bar using the following CSS code: #main-nav { margin-left: auto; margin-right: auto;} Unfortunately, this method is not achieving the desired result. I even tried adding <center></cen ...

What is the best approach to animating a specified quantity of divs with CSS and javascript?

How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...

The QR code disappears from the screen once the button is no longer pressed

After following an online tutorial on creating a QR code generator, the code works fine and I am able to display the image. However, I'm facing an issue where the image disappears from the screen once the button is released. Here is the code snippet: ...

Are inline styles being utilized in a Styled component?

I'm currently utilizing styled-components within a React project and I am having trouble finding documentation regarding whether or not a styled component can accept inline styles on the "style" property. For example: The Text component has been styl ...