How to Center Navigation Items in a Bootstrap 4 Navbar?

Centering Navigation Items in Bootstrap

In Bootstrap 4, aligning navigation items (links) to the center of the navbar can be achieved by utilizing flexbox properties. Here's how:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.navbar {
    display: flex;
    justify-content: center;
}

The above code uses flexbox's display property to set the navbar to a flex container, and justify-content to align the navigation items to the center. Bootstrap's collapse class is used to hide the navigation items on smaller screen sizes.

Responsive Adjustment

For responsiveness, you can use Bootstrap's mr-auto utility class to ensure the navigation items center correctly as the browser size changes:

<div class="collapse navbar-collapse mr-auto">
<p><strong>Example</strong></p>
<p>Consider the following code:</p>
<pre class="brush:php;toolbar:false"><nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">...</button>
    <a class="navbar-brand" href="#">...</a>
    <div class="collapse navbar-collapse mr-auto">
<p>CSS:</p>
<pre class="brush:php;toolbar:false">@media (min-width: 768px) {
    .navbar-nav {
        justify-content: center;
    }
}

This code adds a media query that sets the justify-content accordingly when the browser window width is greater than 768px, centering the navigation items only on larger screens.