How to align nav items to the right in Bootstrap 5?
Solution 1:
The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...
-
l(left) has been replaced withs(start) -
r(right) has been replaced withe(end)
Why margin left (ml-*) is not working in Bootstrap 5?
ml-auto no longer exists, and the Bootstrap 5 equivalent would be ms-auto:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block">
<!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/p/zzFC5XoyUm
Why margin right (mr-*) is not working in Bootstrap 5?
Additionally, mr-auto has been replaced with me-auto.
Here you can read why Bootstrap 5 uses the start and end approach to improve RTL support since left and right are absolute, while start and end are relative.
The flexbox utils such as justify-content-end can also be used as explained here
Solution 2:
don't use justify-content-end use ms-auto
use for m- margin and p-padding
-
t- for classes that set margin-top or padding-top -
b- for classes that set margin-bottom or padding-bottom -
s- for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL -
e- for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL -
x- for classes that set both *-left and *-right -
y- for classes that set both *-top and *-bottom
Solution 3:
I actually tried a different approach, although inspired by some of these posts previous to mine. I wanted to just align some buttons (the My Profile and Login buttons) on my navbar to the right while keeping all others left on the navbar.
Follow This Process
- Set the position of the navbar as relative using
position-relative - Put the buttons you want to right-align in a separate
<ul> - Set the
<ul>positioned absolute and at the end like so:<ul class="navbar-nav position-absolute end-0 mx-3"> - Create an empty
<li>before the<ul>you just made to maintain the spacing when shrinking the screen (as absolute elements will overlap with other static and relative elements). - Set the width equal to the right-aligned
<ul>(find this out using Chrome inspect element). E.g.<li class="nav-item" style="width: 150px"></li>
My code as an example
{# Create Navbar #}
<nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="{{ path('home') }}">
<img src="/favicon/android-chrome-192x192.png" alt="Logo" style="height: 50px; width: 50px">
Company Name
</a>
<button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('home') }}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('guide_home') }}">Guide</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
</li>
{# Invisible div to prevent overlap of absolute positioned elements #}
<li class="nav-item" style="width: 150px"></li>
<ul class="navbar-nav position-absolute end-0 mx-3">
{# Create a login or logout link depending whether a user is logged in or not #}
{% if app.user %}
<li class="nav-item">
<a class="nav-link" href="{{ path('profile_home') }}">My Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_logout') }}">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_login') }}">Login/Register</a>
</li>
{% endif %}
</ul>
</ul>
</div>
</div>
</nav>
Overall
I found this a bit easier to wrap my head around compared to other solutions I've seen and was able to get it to work more easily. I hope this is useful for anyone else coming across this post. Please comment if you have any feedback about my method and if you have any improvements. Thanks! :)
Note: My example is done in a Symfony project using twig templates in case you find any of the syntax confusing. However, all the HTML is the same for any dev tools.