Bootstrap centering item in navbar when other items are right-aligned

Issue

I’m currently making a webpage and am using a navbar using Bootstrap. I have three icons aligned on the right, and I want to align another item in the center. However, using mx-auto doesn’t center it in the middle of the webpage and shifts it left a little bit because of the icons on the right. The code is below:

 <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>

How can I center one element even with elements aligned on the right?

Solution

Here you go… I’ve added more icons to show you that the snippet is working. Remove them 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

Answered By – Cervus camelopardalis

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.