Boostrap 5 Horizontally center navbar-CodePudding

On the Bootstrap 5 documentation, it says use "justify-content-center" class to horizontally align a nav element.

<ul >
  <li >
    <a  href="#">Link</a>
  </li>
  <li >
    <a  href="#">Link</a>
  </li>
</ul>

Reference: https://getbootstrap.com/docs/5.0/components/navs-tabs/#horizontal-alignment

How do I horizontally align a navbar? Adding "justify-content-center" to navbar-nav does not work. Is there an elegant way to achieve this using BootStrap's internal classes and not writing custom CSS?

<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Features</a>
        </li>
        <li >
          <a  href="#">Pricing</a>
        </li>
        <li >
          <a >Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

Try this:

Add justify-content-center class in collapse div like below

<div id="navbarNav">

Update: justify-content-center will align contents as center in <ul> but you have <ul> in collapse navbar-collapse so you need to center your <ul> within this div.