27

I have copied a navbar HTML code from https://www.codeply.com/go/qhaBrcWp3v

Example 6:

<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 ml-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">Bdfdsfslog</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link m-2 menu-item">Contact</a>
        </li>
    </ul>
</div>

The code keeps the nav items to right but when I paste it and run my HTML code it doesn't work and all items are in the left place

here is my index.html

<html>
<head>
    <title>Website Template</title>
    <link rel="stylesheet" href="style.css"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
    <div id="home"></div>
    <!-- NAVIGATION -->
    <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 ml-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>
    <!-- END OF NAVIGATION -->
</body>

I have tried Navbar code from https://getbootstrap.com/docs/5.0/components/navbar/ but I don't know how can I move nav items (ml-auto didn't work)

Dhia Djobbi
  • 1,176
  • 2
  • 15
  • 35
CaRL
  • 297
  • 1
  • 4
  • 11

7 Answers7

56

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
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
Sfili_81
  • 2,377
  • 8
  • 27
  • 36
Shashank Kumar Dahiya
  • 21
  • 3
0

Try this:

  <div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Where you have this:

  <!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1"> //modify this to include flex-row-reverse
MCA
  • 98
  • 6
0

For those who started using bootstrap 5 (beta version), there are little changes there in the class names.

"Left" is replaced by "start" and "right" is replaced with "end" everywhere in bootstrap.

E.g, In bootstrap 4, we had ml-auto but in bootstrap 5, we have to use ms-auto and similarly for mr, we have me.

And same applies for every class in bootstrap, whether "left" and "right" are represented by "l" and "r", they got replaced by "s" and "e" and if they are used anywhere as complete words (left and right) they got replaced by "start" and "end"

Irfan wani
  • 4,084
  • 2
  • 19
  • 34
0

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.

Lushawn
  • 522
  • 1
  • 3
  • 17
0

this work for me:

use this class en you "ui" tag:

"ms-auto" it mean "margin start" auto,, and this will align your nav-items to the right of the corner.

This is for:

l (left) has been replaced with s (start) in Bootstrap 5

user web services
  • 37
  • 2
0

You can make use of "justify-content-end" if nothing else helps.

Divyanshu Ranjan Srivastava
  • 47
  • 2