Several buttons in an input group

Question

I am trying to implement an input group with several buttons on the left and at the moment there is only one button on the right, as shown in this image:

The problem is that as soon as I have more than one button on each side, the input box resizes to its maximum width and pops one button on smaller displays:

Using the button on the left and the button on the right, it works at all screen levels at 100%:

Le Code:

<div class="input-group br"> <span class="input-group-btn"> <div class="btn-group"> <a href="#" class="btn btn-primary clear-search"> <span class="glyphicon glyphicon-refresh"></span> </a> <a href="#" class="btn btn-primary qr-code"> <span class="glyphicon glyphicon-qrcode"></span> </a> </div> </span> <input class="form-control search" type="search" name="search" placeholder="Search"> <span class="input-group-btn"> <div class="btn-group dropup"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-search"></span> Search <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="buyer-identifier" href="#">Buyer Number</a></li> ... <li class="divider"></li> <li><a class="clear-search" href="#">Clear Search</a></li> </ul> </div> </span> </div> 

Demo screenshot

Any idea on how to make the first image for all screen sizes?

Answer 1

You do not need a btn-group element ...

  <div class="input-group br"> <span class="input-group-btn"> <a href="#" class="btn btn-primary clear-search"> <span class="glyphicon glyphicon-refresh"></span> </a> <a href="#" class="btn btn-primary qr-code"> <span class="glyphicon glyphicon-qrcode"></span> </a> </span> <input class="form-control search" type="search" name="search" placeholder="Search"> <span class="input-group-btn"> <div class="btn-group dropup"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-search"></span> Search <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="buyer-identifier" href="#">Buyer Number</a></li> ... <li class="divider"></li> <li><a class="clear-search" href="#">Clear Search</a></li> </ul> </div> </span> </div> 

Download Example

Answer 2

Do not use two shell elements of a button group.

 <div class="input-group br"> <span class="input-group-btn"> <a href="#" class="btn btn-primary clear-search"> <span class="glyphicon glyphicon-refresh"></span> </a> <a href="#" class="btn btn-primary qr-code"> <span class="glyphicon glyphicon-qrcode"></span> </a> 

Demo

Answer 3

use btn-secondary class

 <div class="input-group"> <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> <div class="input-group-btn"> <button type="button" class="btn btn-secondary">☺</button> <button type="button" class="btn btn-secondary">SEND</button> </div> </div>