How to center navbar links in Bootstrap 4
10,322
Place the mx-auto in the ul and it will center the links
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
...
<ul class="navbar-nav ml-auto mx-auto">
...
</ul>
</div>
</div>
</nav>
Here is a codepen with your example
Related videos on Youtube
Author by
Blake King
Updated on June 04, 2022Comments
-
Blake King almost 2 years
I have a navbar and I would like to center the links inside. I've tried adding mx-auto and text-center. Nothing is working. My code below?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center"> <div class="container text-center"> <a class="navbar-brand text-center" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </div> </nav>
-
Kai over 5 yearsHi, not entirely sure what you mean. I put your code into a jsfiddle and it seems to be centered within the containers. Check the bootstrap version?
-
totoprayogo1916 over 5 yearsavailable in getbootstrap.com/docs/4.1/examples/navbars
-