How can I center the brand and split nav links left/right in Bootstrap 5?

Asked on Jun 04, 2025

Answer

To center the brand and split the navigation links to the left and right in Bootstrap 5, you can use the `navbar` component with utility classes for alignment. Here's a concise example:

<!-- BEGIN COPY / PASTE -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="d-flex justify-content-between w-100">
                    <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>
            </div>
        </nav>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class is used to create a flexbox container, and `justify-content-between` ensures space between the left and right nav links.
`mx-auto` centers the brand within the flex container.
`me-auto` and `ms-auto` are used to push the left and right nav links to the edges.
This setup works well for responsive designs, as Bootstrap's grid and flex utilities handle different screen sizes.

✅ Answered with Bootstrap 5 best practices.