CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4alignment
Pinstripe
Pinstripe

Reputation: 3

Bootstrap 5: NAV items do not align to the right

How to move the nav items to the right side?

I'm using Bootstrap 5 and use the navigation feature. By default, the items are aligned on the left but I want to put them on the right side. I already used navbar-right float: right; and ml-auto even if its on Bootstrap 4. Here is what the navbar look like in the website

this is what the website looks like

And this is what my code looks like:

this is what my code looks like

(NOTE: it will only move to the right if I don't put it inside the <div class="collapse navbar-collapse" id="navbarSupportedContent"> but I need them to be in there.)

Upvotes: 0

Views: 1326

Answers (2)

Jan
Jan

Reputation: 176

I think you are looking for something like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />

  <title>Investigation Management and Alert Site</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
          Investigation Management and Alert Site
        </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Inspections</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="bi bi-person-fill"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Here are a few thinks you should keep in mind:

  • The ml-auto class was used in Bootstrap 4 and navbar-right in Bootstrap 3. With Bootstrap 5 the classnames changed, so you should use ms-auto for this (see Bootrap 5 Migration)
  • Classes must not be comma separated in the HTML. Comma-separation for classes only applies as a CSS-selector.
  • I would recommend to use a icon font or use a single svg-icon for the user-icon. The reason for that is that svg-icons can be scaled without pixelation, they have a much smaller size and are generally a better idea for this use-case in terms of SEO and accessability.
  • Remember to close all tags correctly (in your code you close the ul-tag two times).
  • In the future, try to post your code in a form so that others can copy it easily. With images one might need to type everything by hand if one wants to help you.

I hope that helped you a bit. If not or if you got any questions, feel free to ask. Keep it up!

Upvotes: 1

WebRock
WebRock

Reputation: 76

Use The "flex-row-reverse" class in the mother div. It'll change the position of child items of mother div. Screenshot - https://prnt.sc/uZi6oR9evyaJ

Use the Nav Markup for Desktop & Mobile devices

<nav class="navbar d-lg-flex navbar-expand-lg navbar-light bg-light align-items-center justify-content-between">
        <div class="d-flex w-100 align-items-center justify-content-between">
            <a class="navbar-brand" href="#">
                Site Logo
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse w-100 navbar-collapse flex-row-reverse" id="myNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

Upvotes: 0

Related Questions