How do I change the width of an .input-group in Bootstrap, responsively?

Question

How do I change the width of an .input-group to make it wider? I tried setting width: 50% but that puts a space between the input field and the button.

I also tried setting the width of the input field directly, but that also failed.

And setting it over 100%, which also failed.

It looks good if I set the width to 300px or 400px, but not on mobile.

Here is a Bootply http://www.bootply.com/HGr9b06Q1B

Answer 1

You need to wrap it in bootstraps structure... like:

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4"><!--width is set by this div -->

      <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"></span></button>
        </span>
      </div><!-- /input-group -->

    </div>
  </div>
</div>

See this fork of your bootply

Oh, and try not to use the <center> element, it has been deprecated.