Why is the text in my navbar not centering?

Question

I have two navbars, one of which I want the text centered, but I'm having trouble understanding why I am unsuccessful in doing so. I am new to navbars in general as well as bootstrap, so I apologize If my mistake is obvious. Is it something I should be implementing in the bootstrap end, or is it something that can be addressed within the <style> tags? Thanks.

<nav class="navbar navbar-expand-md navbar-dark" style="background-color: #CBB677">
    <ul class="nav navbar-nav navbar-center">
        <li class="nav-item active">
            <a class="nav-link" href="CoordinatorHomePage.aspx" >COORDINATORS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="TeacherHomePage.aspx">TEACHERS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="ParentsHome.aspx">PARENTS</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="StudentHome.aspx">STUDENTS</a>
        </li>
    </ul>
</nav>

score -1 · Answer 1 · answered Nov 11 '20 at 20:32

IMO, Bootstrap is unnecessarily hard. I use raw CSS JS and HTML, but I'll try to help.

Bootstrap has this example on their site:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

That should be what you're looking for.

You could also implement a navbar in raw HTML/CSS/JS:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" src="index.css">
    <title>Navbar</title>
</head>
<body>
    <navbar>
        <button onclick="window.location.href = '#'" class="active">Something</button>
        <button onclick="window.location.href = '#'">Something else</button>
        <button onclick="window.location.href = '#'">A third thing</button>
    </navbar>
</body>
</html>

/* index.css */
navbar {
    width: 100%;
    height: 10%;
    background-color: #d4d4d4;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
}

navbar>button {
   color: #00ccff;
}

navbar>button.active {
    color: #00ccff;
}

Why is the text in my navbar not centering?

1 Answers1