Bootstrap navigation bar centered: Create beautiful navigation

How to center the Bootstrap navigation bar? Add the utility class justify-content-center to the

element to center all elements horizontally. Optional: Add an offset class (such as offset-1) to offset the navigation bar, offset left or right depending on the value of the offset class.

The Bootstrap navigation bar is centered

With Bootstrap's powerful flexibility, you can easily create a beautiful centered navigation bar.

method:

1. Add utility class:

   • Add the utility class justify-content-center in the <nav></nav> element.
   • This will center all elements in the navigation bar horizontally.

2. Optional: Add offset class:

   • If you want to offset the contents of the navigation bar, you can add an offset class in the <nav></nav> element, such as offset-1 or offset-md-3 .
   • This will offset the navigation bar left or right depending on the value of the offset class.

Sample code:

 <code class="html"><nav class="navbar navbar-expand-lg justify-content-center"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Disabled</a> </li> </ul> </div> </nav></code>

With the above method, you can easily create a horizontally centered Bootstrap navigation bar.

The above is the detailed content of Bootstrap navigation bar centered: Create beautiful navigation. For more information, please follow other related articles on the PHP Chinese website!