Rogue Rogue - 1 year ago 37
CSS Question

Aligning search bar for mobile with bootstrap 3

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:

  1. At tablet size (768px-979px), it no longer is in line with the other buttons. I'm assuming this is an obscure width issue, but I cannot seem to pinpoint it.

  2. At the mobile size (<786px) the search bar and its corresponding button do not match up. Rather the button hangs to the right.

An example of what the site looked like before the move to bootstrap 3 is also below:

I cannot figure out the issue (width?) on the tablet version, and the mobile version can't seemed to be fixed by floating any of the objects within the search bar, so in short I need to figure out in what way I can fix those two things on bootstrap 3.

Answer Source

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>

Don't forget to add form-control class to your input tag.