PerryDaPlatypus PerryDaPlatypus - 3 months ago 7
CSS Question

Search box and Submit Button in line w/ Bootstrap3

I have a project that is based on the Gentellela template from ColorLib. The Search Bar at the top is inline and styled, however is not a form. When I add the code to submit the search to my view, the submit ("Go") button moves to the next line.

What is the best way to accomplish this while keeping the style?

Original Code from Template (sans form tags).

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<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">Go!</button>
</span>
</div>
</div>


My Latest Attempt

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<form action="" method="post" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</form>
</div>


As Always, I appreciate all help, suggestions and comments.

Answer

A good practice would be to nest the input field and the button inside form-group with a div that has a input-group class. This is how input groups are made on Bootstrap.

It applies a display:inline-table style to hold the components inline.

<div style="padding-top:7px;" class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  <form action="" method="post" class="form-inline">
    <div class="form-group">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
         <span class="input-group-btn">
            <button class="btn btn-default" type="submit">Go!</button>
         </span>
      </div>
    </div>
  </form>
</div>