Twitter Bootstrap 3.0 - centered search box

Question

I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button.

My problem: when I go responsive I lose my offset margins and the button wraps to the next line.

<div class="row search">
  <div class="col-md-8 col-md-offset-2">
    <form class="form-inline" role="form">
      <div class="form-group">
        <label class="sr-only" for="">Enter search terms</label>
        <input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
        <input id="cn" name="cn" type="hidden" value="false" />
      </div>
      <button type="submit" id="s" class="btn btn-default">
        <span class="glyphicon glyphicon-search"></span>
      </button>
      <a href="#">Search Help</a>
    </form>
  </div>
</div>

C.f.: http://jsfiddle.net/redo1134/su3eq/2/

Everything's fine at >991px. But at 991 and below I lose the offset.

This is certainly related to the #media (min-width: 992px) media query in bootstrap.css, but I don't know how to keep the offset.

And to make matters worse: when the viewport is <768px the button and the link wrap to the next line.

Again, I'm drawn to bootstrap.css and the min-width: 768px media query, but I don't know how to keep the input, button, and text all together.

Thanks!

Answer 1

<div class="row search">
  <div class="col-sm-8 col-sm-offset-2">
    <form role="form">
            <div class="input-group">
              <input type="text" class="form-control input-sm">
              <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
              </span>
                &nbsp;<a href="#">Search Help</a>
            </div>
    </form>
  </div>
</div>