Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Align Navbar Items to Center Using Bootstrap 4
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" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 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" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 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" 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" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 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" 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" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 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.
10K+ Views
