Organize buttons in bootstrap navbar 4 when hamburger menu appears

0

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>
    
asked by user3911783 30.01.2018 в 17:15
source

0 answers