How to Align Navbar Items to Center using Bootstrap 4?

Bootstrap CSS Web Development Front End Technology

Bootstrap 4 is a popular CSS framework that helps developers create responsive, mobilefirst websites quickly and easily. One of the most common design elements in a website is the navigation bar or navbar. In this article, we will discuss how to align the items in a navbar to the center using Bootstrap 4.

Approaches

There are a few different ways to align the items in a navbar to the center using Bootstrap 4.

The two approaches that we will be discussing in this article are −

Using Built-in Bootstrap 4 Classes
Using CSS to override the default alignment of the navbar items.

Approach 1: Using Built-in Bootstrap 4 Classes

The first approach is to use the built-in Bootstrap 4 classes for aligning elements. Bootstrap 4 provides several classes for controlling the alignment of elements, including the "justifycontent-center" class. This class can be applied to the "navbar-nav" class to align the items in the navbar to the center.

Example

Here is a step-by-step code example with output −

Step 1 − Start by creating a navbar using the "navbar" class, along with additional classes such as "navbar-expand-lg" and "navbar-light" for styling.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Step 2 − Add a "navbar-brand" class to your navbar's brand/logo.

<a class="navbar-brand" href="#">Navbar</a>

Step 3 − Create a button for toggling the navbar's items using the "navbar-toggler" class, along with data-toggle and data-target attributes for specifying the target element and toggling behavior.

<button class="navbar-toggler" type="button" data-toggle="collapse" datatarget="#navbarNav" aria-controls="navbarNav" aria-expanded="false" arialabel="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>

Step 4 − Create a container for the navbar's items using the "collapse navbar-collapse" class, along with an "id" attribute that matches the "data-target" attribute from the button.

<div class="collapse navbar-collapse" id="navbarNav">

Step 5 − Inside the container, create an unordered list of navbar items using the "navbar-nav" class.

<ul class="navbar-nav">

Step 6 − Add the "justify-content-center" class to the "navbar-nav" class to align the items to the center.

<ul class="navbar-nav justify-content-center">

Step 7 − Add list items with "nav-item" and "nav-link" classes for each item in the navbar.

<li class="nav-item active">
   <a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
   <a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
   <a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
   <a class="nav-link disabled" href="#">Disabled</a>
</li>

Step 8 − This is the entire code for the approach using built-in Bootstrap 4 classes to align the navbar items to the center in a single HTML file (index.html) −

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-HcXJqkjpN8O9+IbbTn2m79DyPwMlXwoWufeQjZHPn6EdauI1b6Q5t7mx8X7jIbbV" crossorigin="anonymous">
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-Z4P4o6WOKU6Pzzg6y+UJyOY5k5+gIWe0X0Sl/Z5Z5JmBjgyc6UFO2H2zij6UwPi" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZEjThE6Zf3G3b6QZ1G5KM+" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav justify-content-center">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
            </li>
         </ul>
      </div>
   </nav>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDP1zG7Nr" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Approach 2: Using CSS

The second approach is to use CSS to override the default alignment of the navbar items. This can be done by targeting the "navbar-nav" class in CSS and using the "justify-content" property with a value of "center".

Example

Here is a step-by-step code example with output −

Step 1 − Create an HTML file, and add the following code to include Bootstrap 4 CSS and JS files in your project.

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
            </li>
         </ul>
      </div>
   </nav>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Step 2 − In your CSS file, add the following code to target the "navbar-nav" class and align the items in the navbar to the center.

.navbar-nav{
   justify-content: center;
}

Step 3 − The entire code in a single HTML (index.html) file is as below −

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

   <style>
      .navbar-nav{
         justify-content: center;
      }
   </style>
</head>
<body>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Features</a>
            </li>
         </ul>
      </div>
   </nav>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Conclusion

In this article, we have discussed how to align the items in a navbar to the center using Bootstrap 4. We have presented two approaches: using built-in Bootstrap 4 classes and using CSS. Both approaches are simple and easy to implement, and the choice of which approach to use will depend on the specific requirements of your project.