Bootstrap 4 align nav items to the right

Question

I am trying to align the Nav Items, everything after the social media icons to the right of the screen. I have tried several fixes and cannot seem to work it out!!

Can someone tell me where I am going wrong?

Many thanks for your help

<nav id="mainnavbar" class="navbar navbar-dark navbar-expand-md py-2 fixed-top">
  <img src="BGDlogo.png" width="32" height="32" alt="" loading="lazy">
<a href="#" class="navbar-brand" py-2>BLUE GECKO DIGITAL</a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<div class="d-flex flex-row order-3 order-sm-3">
  <ul class="navbar-nav flex-row">

  </ul>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navlinks">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">HOME</a>
        <li class="nav-item">
            <a href="#" class="nav-link">DESIGN</a>
        <li class="nav-item">
            <a href="#" class="nav-link">SEARCH</a> 
        <li class="nav-item">
            <a href="#" class="nav-link">SOCIAL</a>
      <li class="nav-item">
      <a href="#" class="nav-link">BRAND</a>    
        <li class="nav-item">
            <a href="" class="nav-link">BLOG</a>
        <li class="nav-item">
            <a href="#" class="nav-link">CONTACT</a>    
        </li>
    </ul>

</div>
</nav>

add ml-auto to the list you want to send to right like this
– ngawang13 Jun 09 '20 at 11:13 — ngawang13, Jun 09 '20 at 11:13

score 0 · Accepted Answer · answered Jun 09 '20 at 11:17

Please see the comments in the code snippet for change details. I have closed one <div> and most of the <li> tags. I added justify-content-end class to collapse class <div> to align the nav items to the right.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav id="mainnavbar" class="navbar navbar-dark navbar-expand-md py-2 fixed-top bg-dark">  <!-- Add bg-dark -->
  <img src="BGDlogo.png" width="32" height="32" alt="" loading="lazy">
  <a href="#" class="navbar-brand" py-2>BLUE GECKO DIGITAL</a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-instagram"></a>
  <div class="d-flex flex-row order-3 order-sm-3">
    <ul class="navbar-nav flex-row">

    </ul>
  </div>  <!-- close the div here -->
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse justify-content-end" id="navlinks"> <!-- Add justify-content-end here -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">HOME</a></li> <!--Close <li> -->
        <li class="nav-item">
          <a href="#" class="nav-link">DESIGN</a></li> <!--Close <li> -->
          <li class="nav-item">
            <a href="#" class="nav-link">SEARCH</a></li> <!--Close <li> -->
            <li class="nav-item">
              <a href="#" class="nav-link">SOCIAL</a></li> <!--Close <li> -->
              <li class="nav-item">
                <a href="#" class="nav-link">BRAND</a></li> <!--Close <li> -->
                <li class="nav-item">
                  <a href="" class="nav-link">BLOG</a></li> <!--Close <li> -->
                  <li class="nav-item">
                    <a href="#" class="nav-link">CONTACT</a>
                  </li>
    </ul>

  </div>
</nav>

That works, amazing! Thank you so much! I just need to keep an eye on closing things off and making sure I understand what can be done with bootstrap commands. Thank you again. Brilliant — Will, Jun 09 '20 at 11:59

Bootstrap 4 align nav items to the right

1 Answers1