Twitter Bootstrap 3.0 - centered search box

Question

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

My problem: when I go responsive, I lose the offset fields, and the button wraps on 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> 

Cf: http://jsfiddle.net/redo1134/su3eq/2/

Everything is fine at> 991px. But at 991 and below, I am losing bias.

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

And even worse: when the preview window has a <768px button and the link is moved to the next line.

Again, I refer to bootstrap.css and the min-width: 768px , but I don't know how to save the input, button, and text 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> 

Answer 2

Thus, using Bootstrap will automatically pause it to show the full width at a specific breakpoint ... it does this for responsiveness! I usually have to create my own styles when I want to act something the way I want. Which is completely normal!

So, using inline styles just for a quick example (you can turn them into appropriate styles for your stylesheet), you can do something like this in your search area ... also updated 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> <a href="#">Search Help</a> </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 col line that wraps the inline form and replaces 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> <a href="#">Search Help</a> </form> 

Remove the 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; } }