How to make this layout on the bootstrap: navbar The buttons on the sides can be of arbitrary length, the search string is always full width. Neither the buttons nor the search are hidden when the browser window is small.

I fight for the third hour.

    2 answers 2

    If the width of the buttons is not known and can be different, then I will offer flex :

     .custom-col { display: flex; flex-flow: row nowrap; align-items: center; align-content: center; justify-content: space-between; } .search, .search input { width: 100%; } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <div class="row"> <div class="custom-col"> <button type="button" class="btn btn-success">Button - 1 </button> <div class="search"> <input type="text" class="form-control"> </div> <button type="button" class="btn btn-primary btn-lg">Button - 2</button> </div> </div> </div>

      Right button float:right; , left - float:left; , and the central block - overflow:hidden; .

       .navbar-default { padding: 10px 0; } .navbar-wide { overflow: hidden; padding: 0 15px; } 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <nav class="navbar navbar-default"> <div class="container"> <a class="btn btn-default pull-right" href="#" role="button">Right</a> <a class="btn btn-default pull-left" href="#" role="button">Left</a> <form class="navbar-wide"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> </span> </div> </form> </div> </nav>