In upgrading to bootstrap 3, a lot of the layout for a site I am working on had to be repaired. I've managed to fix a great majority of it, however a final element of the page seems to be out of my grasp.
An example of what I am having issue with can be viewed below:
As far as desktop version goes, it works fine. However if you shrink the page horizontally (to simulate it being the "mobile" version), the button goes wrong in two ways:
You can wrap your
input-group class with a column size e.g.
<div class="col-sm-12"> <div class="input-group"> <input type="text" placeholder="Search..." id="appendedInputButton" class="form-control"> <span class="input-group-btn"> <button type="submit" class="btn btn-primary"> <i class="icon-search"></i> </button> </span> </div> </div>
Don't forget to add
form-control class to your