How do I center the brand while splitting nav links left/right in Bootstrap 5?
Asked on Oct 06, 2025
Answer
In Bootstrap 5, you can center the brand in a navbar while splitting the nav links to the left and right using the `justify-content-between` and `mx-auto` classes. Here's a simple example to achieve this layout.
<!-- BEGIN COPY / PASTE -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="#">Left Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left Link 2</a>
</li>
</ul>
<a class="navbar-brand mx-auto" href="#">Brand</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right Link 2</a>
</li>
</ul>
</div>
</nav>
<!-- END COPY / PASTE -->Additional Comment:
✅ Answered with Bootstrap 5 best practices.- The `navbar-expand-lg` class ensures the navbar is responsive and collapses on smaller screens.
- The `me-auto` class on the first `
- ` pushes the brand to the center.
- The `mx-auto` class centers the brand within the navbar.
- The `ms-auto` class on the second `
- ` aligns the right links to the end of the navbar.
Recommended Links:
← Back to All Questions