I'm in the process of developing a menu system specifically tailored for XL, LG, MD, SM screens in BOOTSTRAP4 while offering a unique appearance for XS (mobile) devices.
Here is the HTML code I currently have:
<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>
You can view the above code on JSFiddle.
Although the current layout works well on larger screens, it appears cluttered on XS sizes. My goal is to split the two sides into separate rows for XS displays. However, using row and col classes overrides the flexbox utilities. How can I achieve this?
For large displays, the desired layout is as follows: https://i.sstatic.net/MG56B.png
The existing code achieves this structure adequately. For XS screens, I aim for the following layout: https://i.sstatic.net/eAEoH.png
Despite my efforts, I couldn't get it to work properly. Currently, I've resorted to creating separate menu divs for XS and other screen sizes because I cannot achieve the desired result with Bootstrap4 alone.
If you know how to move the login, search, and dropdown elements to their own row within the provided code, please share your insights and guidance.