In this article, we will show you how to align navbar items to the right in bootstrap5. We will also show a demo of the navbar aligned to both the left and right sides.
In web development, it’s common to have navigation bars that contain various items such as links and buttons.
When designing a navigation bar, it’s important to consider how these items are aligned on the bar. In some cases, you may want to align items to both the left and right sides of the navigation bar.
In this question, we will explore how to accomplish this using Bootstrap 5, a popular front-end development framework.
By using the built-in flexbox utility classes provided by Bootstrap, we can easily align navbar items to both the left and right sides of the container.
To align navbar items to both left and right in Bootstrap 5, you can use the built-in utility classes for flexbox.
Here’s an example code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto">
<li class="nav-item">
<a class="nav-link" href="#">Left item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left item 2</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Right item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right item 2</a>
</li>
</ul>
</div>
</div>
</nav>
Source Code Link: https://www.codeply.com/p/t2zvxFqASb
Demo:
There can be other ways but this is the most efficient and simple way to align the navbar items to both left and right side using Bootstrap 5.