I need to organize the buttons in the bootstrap 4 navbar when the hamburger menu appears when it collapses, here's how it usually is: Then to collapse for the responsive version:
How could I place the elements down aligned with respect to the hamburger menu ?. This is my code:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-cloud"></i><b> Marca </b></a>
<ul class="navbar-nav ">
<li class="nav-item ">
<div class="custom-switch">
<input class="custom-switch-input" id="ADD_ID_HERE" type="checkbox" checked>
<label class="custom-switch-btn" for="ADD_ID_HERE"></label>
<div class="custom-switch-content-checked text-center" style="color:white; ">
Vasdas
</div>
<div class="custom-switch-content-unchecked text-center" style="color:white;">
Nasdasd
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="btn navbar-btn ml-2 text-white"><i class="fa d-inline fa-lg fa-user-circle-o"></i> Supervisor </a>
</li>
</ul>
<div class="d-flex flex-row justify-content-center my-2">
<div class="p-2"><button class="btn btn-info" id="btn_cosdf" data-toggle="modal" data-target="#exampleModal">Casdsadasd</button></div>
<div class="p-2"><button class="btn btn-info" id="btn_devsdf" data-toggle="modal" data-target="#exampleModal">Dasdasd</button></div>
<div class="p-2"><button class="btn btn-info" id="btn_pasdfsd" data-toggle="modal" data-target="#exampleModal">Pasdasd</button></div>
<div class="p-2"><button class="btn btn-info" id="btn_ssdf" data-toggle="modal" data-target="#exampleModal">Sasdasd</button></div>
<div class="p-2"><button class="btn btn-info" id="btn_tsdfsdf" data-toggle="modal" data-target="#exampleModal">Tadasdasdas</button></div>
<div class="p-2"><button class="btn btn-info" id="btn_vsfsd" data-toggle="modal" data-target="#exampleModal">Vadasdasdas</button></div>
</div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="2348884adas" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" id="buscar" type="submit"><i class="material-icons">search</i></button>
</form>
</div>
</nav>