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 with s (start)
  • r (right) has been replaced with e (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

  1. Set the position of the navbar as relative using position-relative
  2. Put the buttons you want to right-align in a separate <ul>
  3. Set the <ul> positioned absolute and at the end like so: <ul class="navbar-nav position-absolute end-0 mx-3">
  4. 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).
  5. 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.