Bootstrap form inline not working

Question

I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

Answer 1

I had similar issue with form-inline. For me input-group within form-inline worked to keep following input and button in a row next to each other instead of one on top of the other.

<form class="form-inline">
  <div class="input-group">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </div>
</form>

Answer 2

I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.

<div class="control-group">
            <label class="control-label" for="Name">Name</label>
            <div class="controls">
                <input type="text" id="Name" placeholder="Name">
            </div>
        </div>

to:

            <label class="control-label" for="Name">Name</label>

                <input type="text" id="Name" placeholder="Name">