bootstrap 5 ms-auto not pushing unordered list to the right in a navbar

Question

I want to ask a question about ms-auto in Bootstrap 5.

I am trying to create a navbar with margin-start having a property of auto via ms-auto in the Bootstrap 5 documentation.

So far, my code appears as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Frontend Bootcamp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
            <a href="" class="navbar-brand">Frontend Bootcamp</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="navbar-item">
                        <a href="#learn" class="nav-link">What You'll Learn</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#questions" class="nav-link">Questions</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#instructors" class="nav-link">Instructors</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

What I am expecting with ms-auto is as follows:

But what I am actually rendering in the output is this:

I am struggling to understand why ms-auto does not work here with the ui element. I thought that the list of items would shift to the far right, but it has not done so as per the desired result.

Why is my list not responding to ms-auto? Is there an incompatibility or an error in my code?

This source code was derived from a tutorial taken here.

score 1 · Accepted Answer · answered Aug 19 '21 at 12:19

1

try to add w-100 with the parent and use mx-auto instead ms-auto

answered Aug 19 '21 at 12:19

ANDO Andriamalala

308
1
7

Yes, this is correct for Bootstrap 4. I will accept this as the answer with mx-auto. – vik1245 Aug 19 '21 at 12:20

score 0 · Answer 2 · answered Aug 19 '21 at 12:14

I was using the CDN for Bootstrap 4, which I mistakenly accessed on the mainpage.

Using the Bootstrap 5 CDN and JS bundle resolved this matter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Frontend Bootcamp</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
        <div class="container">
            <a href="" class="navbar-brand">Frontend Bootcamp</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav ms-auto">
                    <li class="navbar-item">
                        <a href="#learn" class="nav-link">What You'll Learn</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#questions" class="nav-link">Questions</a>
                    </li>
                    <li class="navbar-item">
                        <a href="#instructors" class="nav-link">Instructors</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

bootstrap 5 ms-auto not pushing unordered list to the right in a navbar

2 Answers2