How do I center elements in bootstrap navbar?-CodePudding

i tried to center elements in bootstrap 5 navbar as vue js template and niether dispay flex and justify content: center, nor text-center didnt work; i tried applaying it to align-items to:

.navbar
.container-fluid
container-fluid a
container-fluid a ul
container-fluid a ul li and it didnt work for me; i want it to work on computer sized screens;

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


<!-- Body -->
<nav >
  <div >
    <a  href="#"></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：

Automatic margin on the start and end sides does the trick. Bootstrap's horizontal margin class mx-auto works, too. This is just implementation of the standard CSS centering technique using Bootstrap classes.

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


<!-- Body -->
<nav >
  <div >
    <a  href="#"></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：

you want to center your menu items, all of them are placed in div.collapse so adding justify-content:center; to it will help you,,, BUT it didn't work for you because div.collapse is not a flexbox! so adding justify-content:center; ALONE, won't has any effect

you need to add d-flex class to it too so it can work properly

here in this code I've added d-lg-flex assuming you want your items to be centered in larger than lg breakpoint, this can help you :

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


<!-- Body -->
<nav >
  <div >
    <a  href="#"></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>

if you want your items to be centered in all devices simply remove -lg from d-lg-flex in div.collapse element

CodePudding user response：

Stackoverflow didnt show my code, the code to following question is:

<nav >
  <div >
    <a  href="#"></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>