Twitter Bootstrap 3.0 - centered search box - html

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>
Search Help
</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>
Search Help
</div>
</form>
</div>
</div>

Answer 2

So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok!
So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here
<!-- Global Search -->
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<div style="width:75%; float: left;">
<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>
<div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Search Help
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>

Answer 3

DEMO:http://jsbin.com/IKaKosoX/1/
EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,output
Remove the row col wrapping the form-inline and replace with this html:
<!-- Global Search -->
<form class="form-inline global-search" 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> Search Help
</form>
Remove previous custom css regarding the form and replace with:
/* center search */
.global-search {
text-align:center;
padding:10px;
}
.global-search * {
display:inline-block;
margin-bottom:0;
}
.global-search .form-control {
width:120px;
}
.global-search a {
display:block;
padding-top:10px;
}
#media (min-width:400px){
.global-search {
padding: 20px 0;
text-align:center;
}
.global-search .form-control {
width:300px;
}
}