Trouble with Bootstrap 4 Nav - Aligning Icons

Question

I'm having trouble getting the search and shopping cart "icons" to align on mobile. The icons should be to the right of the menu on desktop, as they are.

However, I would like to get the icons to the left side of the hamburger on responsive states. Would also like to use the CSS utilities already supplied with BS4.

Any ideas? Thanks in advance.

<!DOCTYPE html>
<html lang="">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Homepage</title>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
 </head>
 <body>

  <div class="container text-uppercase">
   <nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand my-4" href="#"><img src="https://placehold.it/200x100"></a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
     <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
      <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
      <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
      <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
      <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
     </ul>
    </div>
    <div class="d-flex justify-content-end">
     <i class="fas fa-fw fa-search"></i>
     <i class="fas fa-fw fa-shopping-cart"></i>
    </div>
   </nav>
  </div>



  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
 </body>
</html>

Carol Skelly · Accepted Answer · 2018-06-21T23:15:19.710

The Bootstrap 4 navbar is flexbox, so you can use the ordering classes to adjust as needed...

<div class="container text-uppercase">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand my-4" href="#"><img src="https://placehold.it/200x100"></a>
        <button class="navbar-toggler navbar-toggler-right order-lg-0 order-1" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="d-flex justify-content-end order-lg-2 order-0">
            <i class="fas fa-fw fa-search"></i>
            <i class="fas fa-fw fa-shopping-cart"></i>
        </div>
        <div class="collapse navbar-collapse justify-content-end order-lg-1 order-last" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
                <li class="nav-item"><a class="nav-link pr-3" href="#">Item</a></li>
            </ul>
        </div>
    </nav>
</div>

https://www.codeply.com/go/97ZXyZY5E2

Related: Bootstrap 4 Navbar keep section on right even when toggled

Thanks, I tried that already. Unfortunately, the hamburger doesn't stay up top then...it floats down when you click on it. — Dario Zadro, Jun 21 '18 at 22:58
Nice! Anyway you can get the icons to line up next to the hamburger instead of being in the middle? — Dario Zadro, Jun 22 '18 at 00:09
I think your question has been answered... you'll need to play with it some more to get it exactly as you want. Generally, `ml-auto` can be used to push items to the right: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right/41513784#41513784 — Carol Skelly, Jun 22 '18 at 00:19

Trouble with Bootstrap 4 Nav - Aligning Icons

1 Answers1