In Bootstrap, how do you align navbar links to the right?

Question

My assignment is requiring me to write the necessary HTML to make my page look just like this one:

How do you align the Home, Contact, About Us, and Messages links to the rightside on the navbar? I know how to do this in CSS and I am sure there is a way in Javascript, however the assignment requires only to use bootstrap. I have included my HTML code to show what I have tried. Please disregard formatting issues when resizing the window and the dead links. The assignment only requires to replicate the image. Thanks in advance!

Also, if anyone knows what type of bootstrap I am using, please let me know. I want to include it in the tag of the question, but haven't used bootstrap and don't know the version.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>bootstrapMocksStep2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">LOGO</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
          <div class="navbar-nav navbar-right">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
                <li><a class="nav-link" href="#">Contact</a></li>
                <li><a class="nav-link" href="#">About Us</a></li>
                <li><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Messages  <span class="badge badge-success">12</span></a></li>
            </ul>  
        </div>
     
    </nav>
        <h1 class = mt-3>Dashboard:</h1>
        <hr>
        <table class="table table-striped ml-2 mr-2">
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Team</th>
              <th scope="col">All Star</th>
              <th scope="col">Remove</th>
            </tr>
            <tr>
              <td>Steph</td>
              <td>Warriors</td>
              <td>Yes</td>
              <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Lebron</td>
                <td>Cavaliers</td>
                <td>Yes</td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Dwayne</td>
                <td>Heat</td>
                <td>Yes</td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Kobe</td>
                <td>Lakers</td>
                <td>Yes  <span class="badge badge-warning">Legend</span></td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr>
            <tr>
                <td>Isaiah</td>
                <td>Celtics</td>
                <td>Yes  <span class="badge badge-success">Who?</span></td>
                <td><i class="fas fa-trash-alt text-danger"></i></td>
            </tr> 
          </table>
          <hr>
        <h2 class= ml-2>Todos:</h2>
        <div class="alert alert-success mb-0 ml-2 mr-2" role="alert"><strong>
            Feel good about Bootstrap</strong>
          </div>
          <div class="alert alert-primary mb-0 ml-2 mr-2" role="alert"><strong>
            Feel informed about Bootstrap</strong>
          </div>
          <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Feel warned about Bootstrap</strong>
          </div>
          <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Maybe I should read the docs...</strong>
          </div>
          <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            Danger zone</strong>
          </div>
          <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            I really should read the docs...</strong>
    </div>
     

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

You are using BS4 (4.5.2). You can see this in the CDN link you have in your code: `https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/...` — Mech, Sep 01 '20 at 05:19
Does this answer your question? [Bootstrap 4 align navbar items to the right](https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right) — bertdida, Sep 01 '20 at 05:27
Yes, thank you that did have a the justify-content-between method which seemed to work for me. — personwholikestocode, Sep 01 '20 at 05:37

score 2 · Accepted Answer · answered Sep 01 '20 at 05:31

Well, you just need to use flex approach in your case and use justify-content-between class from the bootstrap on your <nav> element.

So your final code should be something like this:

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

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>bootstrapMocksStep2</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between">
    <a class="navbar-brand" href="#">LOGO</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-nav navbar-right">
      <ul class="nav navbar-nav navbar-right">
        <li><a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a></li>
        <li><a class="nav-link" href="#">Contact</a></li>
        <li><a class="nav-link" href="#">About Us</a></li>
        <li><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Messages  <span class="badge badge-success">12</span></a></li>
      </ul>
    </div>

  </nav>
  <h1 class=m t-3>Dashboard:</h1>
  <hr>
  <table class="table table-striped ml-2 mr-2">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Team</th>
      <th scope="col">All Star</th>
      <th scope="col">Remove</th>
    </tr>
    <tr>
      <td>Steph</td>
      <td>Warriors</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Lebron</td>
      <td>Cavaliers</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Dwayne</td>
      <td>Heat</td>
      <td>Yes</td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Kobe</td>
      <td>Lakers</td>
      <td>Yes <span class="badge badge-warning">Legend</span></td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
    <tr>
      <td>Isaiah</td>
      <td>Celtics</td>
      <td>Yes <span class="badge badge-success">Who?</span></td>
      <td><i class="fas fa-trash-alt text-danger"></i></td>
    </tr>
  </table>
  <hr>
  <h2 class=m l-2>Todos:</h2>
  <div class="alert alert-success mb-0 ml-2 mr-2" role="alert"><strong>
            Feel good about Bootstrap</strong>
  </div>
  <div class="alert alert-primary mb-0 ml-2 mr-2" role="alert"><strong>
            Feel informed about Bootstrap</strong>
  </div>
  <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Feel warned about Bootstrap</strong>
  </div>
  <div class="alert alert-warning mb-0 ml-2 mr-2" role="alert"><strong>
            Maybe I should read the docs...</strong>
  </div>
  <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            Danger zone</strong>
  </div>
  <div class="alert alert-danger mb-0 ml-2 mr-2" role="alert"><strong>
            I really should read the docs...</strong>
  </div>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

score 0 · Answer 2 · answered Oct 13 '21 at 11:58

0

Just add the class "ms-auto"

<div class="navbar-nav navbar-right ms-auto">

this should work.

answered Oct 13 '21 at 11:58

Anushka Gupta

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 13 '21 at 12:31

In Bootstrap, how do you align navbar links to the right?

2 Answers2