Can't center nav elements responsively using css and bootstrap-CodePudding

What I want is to have my navbar-brand centered responsively on all platforms and my nav items/links, including the navbar-toggler positioned on right.

Right now it looks like this. on large screens. And I can't get it centered at all.

But if I shrink it down below 991px dimension, the navbar does centered, albeit strange and is not properly aligned with the items.

On smaller screens

I am using bootstrap alone and my css file doesn't have anything in it yet.

I've tried overwriting it on my css file but it won't center at all. I've read bootstrap's docs but I can't seem to make it work.

I'm pretty sure it has something to do with the navbar-expand-lg, because it affects the nav-links and the navbar-brand (centers it) upon shrinking below 991px dimension.

Here's my code:

<div  id="navbarTogglerDemo01">
                <ul >
                    <li >
                        <a  href="#">Link 1</a>
                    </li>
                    <li >
                        <a  href="#">Link 2</a>
                    </li>
                    <li >
                        <a  href="#">Link 3</a>
                    </li>
                </ul>
                </div>
            </div>
            </nav>

CodePudding user response：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>
    <nav >
        <div >
            <a  href="#">brand</a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

            <div  id="navbarTogglerDemo01">
                <ul >
                    <li >
                        <a  href="#">Link 1</a>
                    </li>
                    <li >
                        <a  href="#">Link 2</a>
                    </li>
                    <li >
                        <a  href="#">Link 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>

</html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body>
    <nav >
        <div >
            <a  href="#">brand</a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
                aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

            <div  id="navbarTogglerDemo01">
                <ul >
                    <li >
                        <a  href="#">Link 1</a>
                    </li>
                    <li >
                        <a  href="#">Link 2</a>
                    </li>
                    <li >
                        <a  href="#">Link 3</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

The .navbar-brand does not align with the .nav-links due to the space occupied by the .navbar-toggler. With the help of BS's position utility classes you can take the .navbar-toggler's size out of the equation. You need to add .position-relative to the .container-fluid and .position-absolute.top-0.end-0 to the .navbar-toggler. The toggler will be removed from the flow and positioned at the top right corner, leaving everything else centered within the container width.
You can have everything centered on two lines in the expanded view by adding .justify-content-center.flex-wrap to the container, and .w-100 to the brand.

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

<nav >
  <div >
    <a  href="#">brand</a>

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

    <div  id="navbarTogglerDemo01">
      <ul >
        <li >
          <a  href="#">Link 1</a>
        </li>
        <li >
          <a  href="#">Link 2</a>
        </li>
        <li >
          <a  href="#">Link 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>