How to center an item in a Bootstrap navbar without affecting the alignment of other right-aligned items

Currently, I am in the process of designing a website and have implemented a Bootstrap navbar. The navbar consists of three icons aligned to the right, and I am looking to center another element. However, when I use mx-auto, the element does not center perfectly due to the presence of icons on the right side. Below is the code snippet:

 <nav class="navbar bg-light">
    <div class="container-fluid">
      <div class="navbar-brand mx-auto order-0" href="#">
        <a class="rainbow" href="https://en.wikipedia.org/wiki/RGB_color_model" target="_blank">color</a>dle
      </div>

      <div class="ms-auto order-3">
        <button class="icons settings-icon"><i class="fa-solid fa-gear"></i></button>
        <button class="icons leaderboard-icon"><i class="fa-regular fa-circle-question"></i></button>
        <button class="icons question-icon"><i class="fa-solid fa-chart-simple"></i></button>
      </div>



    </div>
  </nav>

Is there a way to center an element despite the presence of aligned elements on the right side?

htmlcssbootstrap-5

Answer №1

Welcome! I have included additional icons to demonstrate the functionality of the code snippet. Please ensure to remove them when implementing this in your actual project.

.rainbow {
  color: blue !important;
  text-decoration: underline !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1ffe1fd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6d8c6da">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
      <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2"></div>
      <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto rainbow" href="https://en.wikipedia.org/wiki/RGB_color_model" target="_blank">color</a>dle
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
          </button>
      </div>
      <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ms-auto">
          <button class="icons settings-icon">
              <i class="fa-solid fa-gear"></i>
            </button>
          <button class="icons leaderboard-icon">
              <i class="fa-regular fa-circle-question"></i>
            </button>
          <button class="icons question-icon">
              <i class="fa-solid fa-chart-simple"></i>
            </button>
          <button class="icons settings-icon">
              <i class="fa-solid fa-gear"></i>
            </button>
          <button class="icons leaderboard-icon">
              <i class="fa-regular fa-circle-question"></i>
            </button>
          <button class="icons question-icon">
              <i class="fa-solid fa-chart-simple"></i>
            </button>
          <button class="icons settings-icon">
              <i class="fa-solid fa-gear"></i>
            </button>
          <button class="icons leaderboard-icon">
              <i class="fa-regular fa-circle-question"></i>
            </button>
          <button class="icons question-icon">
              <i class="fa-solid fa-chart-simple"></i>
            </button>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

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

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

javascriptjqueryhtmlcss

The mobile page is refusing to scroll, causing all the text to bunch up at the top of the screen

After learning HTML/CSS/Js/PhP over a few months, I recently completed my first website. I am facing an issue with one of the pages on my website when viewed on a mobile device. The parallax scrolling header image does not scroll either horizontally or ve ...

htmlcss

CSS: The Ultimate Guide to Fixing Your Footer at the Bottom of Your Page

My goal is to anchor the Footer to the bottom of the page. I attempted to achieve this by using Absolute positioning in CSS, as suggested in similar discussions. However, the footer seems to be behaving like a Fixed element rather than Absolute. html, b ...

htmlcss

Display or Conceal Multiple Divisions Using Angular 2

I am looking to implement a functionality using Li lists to toggle the visibility of multiple divs in Angular 2. Initially, all divs on the page will be visible. When viewing on a smaller screen, I want to hide some divs and show a specific div when a cor ...

htmlangulartypescript

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

javascriptjqueryhtmlcssmasonry

Having difficulty with category level activation while implementing PHP page navigation with arrays and foreach loop

After receiving some excellent assistance from CBroe and @MeathCoder in a previous post, I managed to make some amazing changes. However, I'm currently facing an issue with setting the category as active. Here's the code snippet I'm working ...

phphtml

Using Query strings in JavaScript: A Quick Guide

I recently completed a calculator project with only two pages. However, I am struggling to figure out how to pass input field values from one page to another. Despite trying multiple methods, nothing seems to be working. Does anyone know how to successful ...

javascriptphpjqueryhtml

Consistent dimensions for columns in a table, automatically adjusting based on content

Can we ensure that all rows and columns maintain equal height, whether or not they contain an image? If you need a visual representation of this concept, refer to this example: [] [] [] ...

csscss-tables

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

javascripthtmlbuttoncharts

Is it possible to customize a row with checkboxes in ng2-smart-table when creating a new row?

When adding a new row, I would like a checkbox in the Status column and an input text field in the Image column. You can see an example image here. ...

htmlcssangulartypescriptng2-smart-table

Using jQuery to update the parent element from within an iframe

Below is a simplified test scenario: a.html <!DOCTYPE html> <html> <body> <input type="text" id="myinput"> <iframe id="frame" src="b.html" style="width:100%;height:100%" frameBorder="0"></iframe> </bod ...

javascriptjqueryhtmliframe

Is it possible to have two large text areas situated next to each other, taking up the entire width of the website like in Sublime Text editor, and arranged

Take a look at this illustration showcasing a sublime text view with dual columns for focus groups: ...

javascripthtmljquerycssresponsive-design

Exploring Material UI: Step-by-step guide to customizing component styles

After reviewing the documentation, I have discovered two ways to style the component: import * as React from 'react'; import { makeStyles } from '@mui/styles'; import Button from '@mui/material/Button'; const useStyles = make ...

htmlcssreactjsmaterial-uimern

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

htmlcsssemantic-ui

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

Identifying dates in pandas index and header: A comprehensive guide

After utilizing the HTML parser to extract a table from a particular website, the current output looks similar to the following: Current Output: 1 Sep 2 Sep 3 Sep 4 Sep 00:00 11 47 54 10 ...

pythonhtmlpython-3.xpandashtml-parsing

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

htmlcss

The HTML and JavaScript implementation of the Game of Life is experiencing technical difficulties

I attempted to create my own version of the Game of Life using HTML canvas and JavaScript. With the aid of various online tutorials, I was able to write a piece of code that I am still confident in. However, upon launching the HTML page in the browser and ...

javascripthtmlhtml5-canvasconways-game-of-life

The function will not be triggered when the form is submitted

I've set up this form to send data to the server-side. It's built in HTML/CSS with AngularJS as well. I made sure that the button is placed inside the form, a common mistake that can cause issues. However, despite my efforts, the function "onAddE ...

javascripthtmlcssangularjsweb