'Bootstrap 4 mr-auto alignment not working in navbar?

I have looked through other similar questions on this site yet could not interpret an answer for myself as I am a beginner regarding web development. I want to have the contact link in my navbar be aligned to the right of the navbar. However, mr-auto and everything else I have tried has not worked. mr-auto just makes it look like a hyperlink without moving it to the right hand side at all. The following is my html code and the css stylesheet is currently empty so I have nothing to show for that.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Me</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- Left Corner Title -->
        <a class="navbar-brand" href="#"> Portfolio v1 </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Nav Bar List -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#"> Projects </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#"> About Me </a>
            </li>
            
            <!-- Right Corner -->
            <li class="nav-item">
                <a class="nav-link float-right" href="#"> Contact </a>
            </li>
            
          </ul>

          <!----
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        -->

        </div>
      </nav>

</body>
</html>
htmlbootstrap-4navbar


Solution 1:[1]

mr-auto adds an auto margin on the right side, thus pushing everything to the left. If you want to push everything on the right, you need to have ml-auto. Just replace that, and all your links will be aligned to the right (valid till BootStrap 4).

For any BootStrap 5 users, mr becomes me & ml becomes ms.

Solution 2:[2]

In Bootstrap 4, the mr-auto class puts an auto margin on the right side so the elements will move towards the left as there will be a margin on their right. You have to use the ml-auto class on the Contact link so that it has a margin on its left side and so it will move towards the right. Also, take the contact link out of the <ul> for the ml-auto class to take effect.

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Me</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- Left Corner Title -->
        <a class="navbar-brand" href="#"> Portfolio v1 </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Nav Bar List -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#"> Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#"> Projects </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#"> About Me </a>
                </li>
            </ul>

            <!-- Right Corner -->
            <!-- <li class="nav-item"> -->
            <a class="nav-link ml-auto" href="#"> Contact </a>
            <!-- </li> -->

        </div>
    </nav>

</body>
</html>

Solution 3:[3]

You can specify its position from right using the position property in CSS. But keep in mind when elements will collapse in the menu in navbar then it might look ugly. In that case use @media query to correct the position. Set proper id of li element containing contact and also place the link of your stylesheet below that of Bootstrap .

#rt{
  position:absolute;
  right: 10px;
}

If you feel confused by all this then please read about position and @media .

Solution 4:[4]

<ul class="navbar-nav ml-auto">
  1. ml-auto - Right align
  2. mx-auto - Center align
  3. mr-auto - Left align

use the above class as per your requirement. :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Zoha Malik
Solution 3 Shashank Tripathi
Solution 4 Web Admin

Related Questions