0

I am facing an issue with the bootstrap 5 navbar. I am trying to create a responsive navbar with bootstrap 5. I want the navbar logo will be on the left side and the nav-links on the right side. But when I used the 'navbar-expand-lg' class it both aligns the logo and nav-links on the left side.

I used the ml-auto class in the ul tag. But it didn't work. Can anyone please help me?

Note: I think mr-auto and ml-auto classes are not working perfectly in bootstrap 5.

.custom {
    background-color: #333333;
}

.logo {
    width: 100px;
}

li a {
    color: white;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <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"
        />

        <link rel="icon" href="desk-lamp.png" />

        <script
            src="https://kit.fontawesome.com/f726a9ed7b.js"
            crossorigin="anonymous"
        ></script>
        <link rel="stylesheet" href="main.css" />
    </head>
    <body>
        <!--  todo head  -->
        <header class="custom site-header container-fluid">
            <div class="container">
                <nav class="navbar navbar-dark navbar-expand-lg">
                    <a href="#" class="navbar-brand">
                        <img src="logo.png" class="logo" alt="" />
                    </a>

                    <button
                        class="navbar-toggler"
                        data-bs-toggle="collapse"
                        data-bs-target="#nav"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="navbar-collapse collapse" id="nav">
                        <ul class="navbar-nav ml-auto">
                            <li class="navigation">
                                <a target="blank" href="index.html" class="nav-link">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="blog.html">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="reference.html"
                                    >Reference</a
                                >
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="contact.html"
                                    >Contact</a
                                >
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!--  todo hero -->
        <section></section>

        <!-- bost your income -->
        <section></section>

        <!-- who benifits -->

        <section></section>

        <!--  course features -->

        <section></section>

        <!-- course features -->

        <section></section>

        <!-- video section -->

        <section></section>

        <!-- instructer section -->
        <section></section>

        <!-- testimonial setion -->
        <section></section>

        <!-- sign up section -->

        <section></section>

        <!-- footer -->

        <footer></footer>

        <!-- model -->

        <div></div>

        <!-- boostrap core javascript -->

        <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>
    </body>
</html>
ArSeN
  • 5,133
  • 3
  • 19
  • 26
Sonet Adhikary
  • 466
  • 1
  • 4
  • 8
  • As you can [see here](https://stackoverflow.com/questions/65253543/align-nav-items-to-right-in-bootstrap-5/65254055#65254055) `ml-auto`/`mr-auto` have changed to `ms-auto`/`me-auto`. – Carol Skelly Dec 30 '20 at 13:36

1 Answers1

0

Yes, you are right. Negative margins are disabled by default but can be enabled in Sass by setting $enable-negative-margins: true. Read their Documentation: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin

Or you can write in your custom CSS. Check my code -

            .custom {
            background-color: #333333;
            }

            .logo {
                width: 100px;
            }

            li a {
                color: white;
                font-weight: bold;
            }

            .navbar-nav{
                margin-left: auto !important;
            }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap</title>
        <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">




        <link rel="icon" href="desk-lamp.png" />

        <script
            src="https://kit.fontawesome.com/f726a9ed7b.js"
            crossorigin="anonymous"
        ></script>
        
    </head>
    <body>
        <!--  todo head  -->
        <header class="custom site-header container-fluid">
            <div class="container">
                <nav class="navbar navbar-dark navbar-expand-lg">
                    <a href="#" class="navbar-brand">
                        <img src="logo.png" class="logo" alt="" />
                    </a>

                    <button
                        class="navbar-toggler"
                        data-bs-toggle="collapse"
                        data-bs-target="#nav"
                    >
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    

                    <div class="navbar-collapse collapse " id="nav">
                        <ul class="navbar-nav">
                            <li class="navigation">
                                <a target="blank" href="index.html" class="nav-link">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="blog.html">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="reference.html"
                                    >Reference</a
                                >
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" target="blank" href="contact.html"
                                    >Contact</a
                                >
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!--  todo hero -->
        <section></section>

        <!-- bost your income -->
        <section></section>

        <!-- who benifits -->

        <section></section>

        <!--  course features -->

        <section></section>

        <!-- course features -->

        <section></section>

        <!-- video section -->

        <section></section>

        <!-- instructer section -->
        <section></section>

        <!-- testimonial setion -->
        <section></section>

        <!-- sign up section -->

        <section></section>

        <!-- footer -->

        <footer></footer>

        <!-- model -->

        <div></div>

        <!-- boostrap core javascript -->

        <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>
    </body>
</html>
Anwar Hossen
  • 536
  • 5
  • 11