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

Question

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 class="collapse navbar-collapse" 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/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark_disabled">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class=" nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="search.php">Nav Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
jsfiddle: https://jsfiddle.net/eagucmh0/

Answer 1

The bootstrap documentation indicates the justify-content-center should be on the <ul> element - <ul class="nav justify-content-center">
https://getbootstrap.com/docs/5.1/components/navs-tabs/
Update
Try this...
<!-- ======= Header ======= -->
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark ">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- <div class="collapse navbar-collapse" id="navbarSupportedContent"> -->
<ul class="navbar-nav mb-2 mb-lg-0 justify-content-center collapse navbar-collapse" id="navbarSupportedContent">
<li class=" nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" 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/

Answer 2

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/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="header">
<nav class="navbar navbar-colour navbar-expand-lg navbar-dark_disabled">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">BRAND</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class=" nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="#">About</a>
</li>
<li class=" nav-item dropdown">
<a class="navolour nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Drop Down
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Nav Item 1</a></li>
<li><a class="dropdown-item" href="#">Nav Item 2</a></li>
<li><a class="dropdown-item" href="#">Nav Item 3</a></li>
</ul>
</li>
<li class=" nav-item">
<a class="navolour nav-link" href="search.php">Nav Link</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>