Bootstrap form inline not working - css

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

From Bootstrap reference, for inline forms :
This only applies to forms within viewports that are at least 768px
wide.
and as far as your layout is concerned,
<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>
its perfectly fine..inline :
working demo

Answer 2

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 3

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">

Answer 4

Yes! removing the second class from the div worked for me.
<form class="form-inline name=" search">
<fieldset>
<div class="form-group">
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</div>
</fieldset>
to
<form class="form-inline name=" search">
<fieldset>
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</fieldset>