Make buttons to right side Bootstrap

Question

I want to make the buttons up in the header, from right side (which is the default), to the left side. Abcd to right side. And all A1 , A2 , A3, A4 , A5 to left side.

My code is :-

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
     <div class="container">
       <a class="navbar-brand" href="index.php">Abcd</a> 
       <div class= "collapse navbar-collapse" id="ftco-nav"  >
         <ul class="navbar-nav ml-auto " >
           <li class="nav-item active"  ><a href="index.php" class="nav-link" >  A1 </a></li> 
           <li class="nav-item"><a href="services.php" class="nav-link"> A2 </a></li>
           <li class="nav-item"><a href="about.php" class="nav-link"> A3 </a></li>
           <li class="nav-item"><a href="contact.php" class="nav-link"> A4 </a></li>
           <li class="nav-item"><a href="admin/index.php" class="nav-link">A5</a></li>
         </ul>
       </div>
     </div>
   </nav>

Have look at this answer : https://stackoverflow.com/questions/40178386/bootstrap-4-navbar-items-on-right-side — Janak Prajapati, Jun 23 '20 at 13:49

Fareed Khan · Accepted Answer · 2020-06-23T14:06:15.417

You cam simply use mr-auto class it will aligned to left, instead of ml-auto and putting your abcd div at the end so it will be aligned to right on desktop screen

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
  <div class="container">


    <div class="collapse navbar-collapse" id="ftco-nav">
    
        <!-- mr-auto class so it will treated as left -->
      <ul class="navbar-nav mr-auto ">
      
        <li class="nav-item active"><a href="index.php" class="nav-link">  A1 </a></li>
        <li class="nav-item"><a href="services.php" class="nav-link"> A2 </a></li>

        <li class="nav-item"><a href="about.php" class="nav-link"> A3 </a></li>

        <li class="nav-item"><a href="contact.php" class="nav-link"> A4 </a></li>

        <li class="nav-item"><a href="admin/index.php" class="nav-link">A5</a></li>
      </ul>
    </div>
    
    <!-- LOGO AT THE END SO IT WILL BE AT RIGHT -->
    <a class="navbar-brand" href="index.php">Abcd</a>
  </div>
</nav>

Make buttons to right side Bootstrap

1 Answers1