How do I center navbar link items using Bootstrap?-CodePudding

I followed the w3schools documentation page for bootstrap navbars, which said to add justify-content-center to my navbar to center links. In addition, I followed a YouTube video which said to do the same thing, with the caveat of adding that Bootstrap class to the div class which has <div however, when I add it to my code, it does not center any of the items. I only want to center the nav links and not the brand logo.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header >
  <nav >
    <div >
      <a  href="index.php">BRAND</a>

      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
      <div  id="navbarSupportedContent">
        <ul >

          <li >
            <a  aria-current="page" href="#">Home</a>
          </li>

          <li >
            <a  href="#">About</a>
          </li>

          <li >
            <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Drop Down
              </a>
            <ul  aria-labelledby="navbarDropdown">
              <li><a  href="#">Nav Item 1</a></li>
              <li><a  href="#">Nav Item 2</a></li>
              <li><a  href="#">Nav Item 3</a></li>
            </ul>
          </li>

          <li >
            <a  href="search.php">Nav Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

jsfiddle: https://jsfiddle.net/eagucmh0/

CodePudding user response：

The bootstrap documentation indicates the justify-content-center should be on the <ul> element - <ul >

https://getbootstrap.com/docs/5.1/components/navs-tabs/

Update

Try this...

  <!-- ======= Header ======= -->
  <header >
    <nav >
      <div >
        <a  href="index.php">BRAND</a>
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
        <!-- <div  id="navbarSupportedContent"> -->
          <ul  id="navbarSupportedContent">
            <li >
              <a  aria-current="page" href="#">Home</a>
            </li>
            <li >
              <a  href="#">About</a>
            </li>
            <li >
              <a  href="#" id="navbarDropdown" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">
                Drop Down
              </a>
              <ul  aria-labelledby="navbarDropdown">
                <li><a  href="#">Nav Item 1</a></li>
                <li><a  href="#">Nav Item 2</a></li>
                <li><a  href="#">Nav Item 3</a></li>
              </ul>
            </li>
            <li >
              <a  href="search.php">Nav Link</a>
            </li>
          </ul>
        <!-- </div> -->
      </div>
    </nav>
  </header><!-- End Header -->

Commented out the inner <div> and moved its classes and the id to the <ul> element.

jsfiddle: https://jsfiddle.net/0vm29bah/

CodePudding user response：

You need to take the me-auto class off the list. That pushes it over even if you use centering classes on the parent element.

See the full page demo.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header >
  <nav >
    <div >
      <a  href="index.php">BRAND</a>

      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
      <div  id="navbarSupportedContent">
        <ul >

          <li >
            <a  aria-current="page" href="#">Home</a>
          </li>

          <li >
            <a  href="#">About</a>
          </li>

          <li >
            <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Drop Down
              </a>
            <ul  aria-labelledby="navbarDropdown">
              <li><a  href="#">Nav Item 1</a></li>
              <li><a  href="#">Nav Item 2</a></li>
              <li><a  href="#">Nav Item 3</a></li>
            </ul>
          </li>

          <li >
            <a  href="search.php">Nav Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>