Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Align Navbar Items to Center using Bootstrap 4?
Bootstrap 4 is a popular CSS framework that helps developers create responsive, mobile-first 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.
Methods
There are two effective methods to center navbar items in Bootstrap 4
Method 1: Using Built-in Bootstrap 4 Classes
Method 2: Using Custom CSS
Method 1: Using Built-in Bootstrap 4 Classes
Bootstrap 4 provides the justify-content-center class which can be applied to the navbar-nav element to center-align navbar items.
Example
The following example demonstrates how to center navbar items using Bootstrap's utility class
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">TutorialsPoint</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="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
A responsive navbar with "TutorialsPoint" brand on the left and centered navigation items (Home, Tutorials, Articles, Contact) appears on the page.
Method 2: Using Custom CSS
You can also center navbar items by targeting the .navbar-nav class with custom CSS using the justify-content: center property.
Example
The following example shows how to center navbar items using custom CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.navbar-nav {
justify-content: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">TutorialsPoint</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="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
A dark-themed responsive navbar with "TutorialsPoint" brand on the left and centered navigation items (Home, Tutorials, Articles, Contact) appears on the page.
Key Points
| Method | Approach | Best For |
|---|---|---|
| Bootstrap Class | Add justify-content-center to navbar-nav
|
Quick implementation without custom CSS |
| Custom CSS | Use justify-content: center on .navbar-nav
|
Greater control and customization |
Conclusion
Both methods effectively center navbar items in Bootstrap 4. Use the justify-content-center class for quick implementation or custom CSS for more control over styling.
10K+ Views
