Bootstrap4 Grid System - Flex in SM+ and Row>Col in XS

Question

I'm trying to create a menu system designed for XL,LG,MD,SM but with a different look for XS (mobile) in BOOTSTRAP4.

I've got the following HTML:

<div class="container-fluid">

  <div class="d-flex">

    <div class="mr-auto">

      <ul id='menu'>
        <li class="mt-1">
          <a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>
      </ul>

    </div>


    <div class="d-flex">
      <div class="">

        <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
        </button>

      </div>
      <div class="">

        <form class="form-inline mr-1" action='/search' method='POST'>
          <div class="input-group input-group-sm mx-auto">
            <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
            <div class="input-group-append">
              <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
            </div>
          </div>
        </form>


      </div>
      <div class="">

        <div class="dropdown">
          <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Which can be found at JSFiddle.

This is working fine on the larger screens, but on XS it just compresses everything together and looks horrible. I want the two different sides to go on to two different rows, but when I add row>col classes, it negates the flexbox utilities. How can I achieve this?

This is the layout I need for large displays:

Which the above code performs okay. But for XS I want this layout:

Which I just cannot get working. Right now i've just created two completely separate menu divs one that displays on XS and one for the rest, as I can't get bootstrap4 to do what I want.

Please, if anyone knows how to get the login, search and dropdown on to its own row in the above code please help and show me.

I don't see that you're using the grid system (row, col) anywhere in the code. It looks like you've already asked [the same question](https://stackoverflow.com/questions/60625823/customizing-navbar) — Carol Skelly, Mar 11 '20 at 11:26
@Zim yes but I dont think I phrased it correctly. The problem is, I WANT to use the grid system for (Login, Search, Dropdown) in XS, but I want Flex in SM and above. I still cant get an answer on it. — Chud37, Mar 11 '20 at 11:38
As [explained here](https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024) it's not really a good idea to use the grid for the navbar. Also, I don't really understand what the Menu 1 dropdown is in the desired XS image. Is that all the menu items collapsed? You should be able to get what you need using the [order and flexbox utility classes](https://getbootstrap.com/docs/4.4/utilities/flex/) — Carol Skelly, Mar 11 '20 at 12:23

score 0 · Answer 1 · answered Mar 11 '20 at 10:57

Change Bootstrap Class

<div class="container-fluid">

  <div class="d-sm-flex align-items-center"> /*Change Here*/

    <div class="d-flex justify-content-between">/*Change Here*/

      <ul id='menu'>
        <li class="mt-1">
          <a href="#goto-list-books" class="nav-link open-popup"><span class="fas fa-th fa-lg"></span></a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>

        <li class="mt-1">
          <a href="/" class="nav-link">Menu 1</a>
        </li>
      </ul>

    </div>


    <div class="d-flex justify-content-between"> /*Change Here*/
      <div class="">

        <button class="btn btn-outline-warning btn-sm mr-1" data-toggle='modal' data-target='#login'><i class="fas fa-sign-in-alt mr5"></i>Login
        </button>

      </div>
      <div class="flex-fill"> /*Change Here*/

        <form class="form-inline mr-1" action='/search' method='POST'>
          <div class="input-group input-group-sm mx-auto">
            <input type="text" class="form-control" name='search_string' placeholder="Search" value=''>
            <div class="input-group-append">
              <button class="btn btn-outline-warning" type="submit"><i class="fas fa-search mr5"></i></button>
            </div>
          </div>
        </form>


      </div>
      <div class="">

        <div class="dropdown">
          <button class="btn btn-outline-warning btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
            <a class="dropdown-item" href="#">Dropdown Option</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/axL14kp5/3/

Thanks, thats great but theres no gap in between the menus (Menu 1) and the buttons and search. In SM and above the yellow buttons need to be on the right — Chud37, Mar 11 '20 at 11:36

Bootstrap4 Grid System - Flex in SM+ and Row>Col in XS

1 Answers1