Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align two navbars in bootstrap?
Introduction
A well-liked front-end framework for creating websites and applications is called Bootstrap. The grid system in Bootstrap can be used to align two navigation bars (navbars).
To align the two navbars in Bootstrap, use the ml-auto class on the second navbar and the’ justify-content-between’ type on the parent container of the two navbars.
To position, the second navbar to the right of the parent container instead, use the 'float-right' class on the navbar.
Approaches
The following are some typical methods for aligning two navbars in bootstrap −
Using the 'container' class on the parent container of the two navbars and the 'ml-auto' class on the second navbar.
Using the 'd-flex' class on the parent container of the two navbars and the 'justify-content-between’ class to align the two navbars side by side.
Let us look at each approach in detail with examples now.
Approach 1: Using ‘ml-auto class’
The first approach for aligning the two navbars in bootstrap is by using the “ ml-auto” class. One way to align two navbars in Bootstrap is to use the class "ml-auto" on the second navbar. This class will align the second navbar to the right of the first one.
Additionally, you can wrap both navbars in a container or container-fluid class to set the width of the navbars.
Algorithm
Here, we will go through a step-by-step example to implement this approach −
Step 1 − Load the JavaScript and CSS files for Bootstrap into your HTML document.
Step 2 − Create two navigation bars (navbars) and give each one the class "navbar."
Step 3 − Include an unordered list (ul) with the class "navbar-nav" inside the first navbar.
Step 4 − Include list elements (li) with the class "nav-item" into the unordered list.
Step 5 − Each list item should have links (a) with the class "nav-link".
Step 6 − The second unordered list inside the second navbar should be given the class "ml-auto." The second navigation bar will then be positioned to the right.
Step 7 − To change the way the navbars look, you can add more styling or classes as necessary.
Step 8 − You can see the aligned navbars by saving your HTML file and opening it in a web browser.
Step 9 − The final code looks like the code below −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
First navbar content
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-primary ml-auto">
Second navbar content
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Approach 2: Using the 'd-flex' class
Aligning two navbars with Flexbox is another option. You can align the two navbars on different sides of the container by adding the "d-flex" and "justify-contentbetween" classes to an element that wraps both navbars.
Algorithm
Here, we will go through a step-by-step example to implement this approach −
Step 1 − Load the JavaScript and CSS files for Bootstrap into your HTML document.
Step 2 − Create two navigation bars (navbars) and give each one the class "navbar."
Step 3 − Around both navbars, add a parent container element with the class "d-flex."
Step 4 − The parent container element should be given the class "justify-contentbetween". This will divide the available space between the two navbars equally.
Step 5 − Each navbar should have an unordered list (ul) with the class "navbar-nav" inside of it.
Step 6 − Add list items (li) with the class "nav-item" inside each unordered list.
Step 7 − Each list item should have links (a) with the class "nav-link".
Step 8 − To change the way the navbars look, you can add more styling or classes as necessary.
Step 9 − You can see the aligned navbars by saving your HTML file and opening it in a web browser.
Step 10 − The final code looks like the code below −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container d-flex justify-content-between">
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
First navbar content
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
Second navbar content
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Conclusion
Using either the "ml-auto" class or the "d-flex" class with "justify-content-between" will align two navbars in Bootstrap. The "d-flex" class with "justify-content-between" divides the space evenly between both navbars, but the "ml-auto" class aligns the second navbar to the right side.
43 Views
