Prevent control ahead with the form

Question

I use a class form-inlinethat puts all the controls on one line, but I noticed that when the window is resized, the button next to the text box goes to the next line. I want to prevent this. Take a look at the image:

and this is the code:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-2 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <input type="text" placeholder="type text here"
                 class="form-control" id="resource_filter" />
          <button class="clear btn btn-default btn-sm" type="button"
                  title="clean">
            <span class="glyphicon glyphicon-repeat"></span>
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

You want to use Bootstrap Button Addons under input groups. Thus, it will remain proportional during window resizing. Make sure your input and button are the same size:

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 hideable-sidebar">
      <div class="well">
        <span><b>Resources</b></span>
        <form class="form-inline">
          <div class="input-group">
            <input type="text" placeholder="type text here" class="form-control" id="resource_filter" />
            <span class="input-group-btn">
              <button class="clear btn btn-default" type="button" title="clean">
                <span class="glyphicon glyphicon-repeat"></span>
              </button>
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Run code