Bootstrap inline form's submit button not in the same line

Question

I tried to use Bootstrap's inline form but oddly the submit button can't be put on the same line with other input items. I had been searching for solutions but didn't find one yet.

Here is my HTML code:

<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
    <input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
    <input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
   <input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
    Status: <select class="selectpicker" id="status" name="status" >
          <option value="All">ALL</option>
          <option value="Successful">Successful</option>
          <option value="Unsuccessful">Unsuccessful</option>
    </select>
   </div>
    <div class="form-group">
    Direction: <select class="selectpicker" id="direction" name="direction">
          <option value="All">All</option>
          <option value="IN">In</option>
          <option value="OUT">Out</option>
    </select>
    </div>
    <button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
    </form>

Can somebody help me to inline the submit button with the other items? Thanks a lot!

Answer 1

Put your button inside the <div class="form-group">

<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
    <input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
    <input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
   <input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
    Status: <select class="selectpicker" id="status" name="status" >
          <option value="All">ALL</option>
          <option value="Successful">Successful</option>
          <option value="Unsuccessful">Unsuccessful</option>
    </select>
</div>
<div class="form-group">
    Direction: <select class="selectpicker" id="direction" name="direction">
          <option value="All">All</option>
          <option value="IN">In</option>
          <option value="OUT">Out</option>
    </select>
</div>
<div class="form-group">
    <button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</div>
</form>

Answer 2

I copied your form into a test project and bootstrap properly inlined the submit button. In addition, I made some changes to your html above. I removed the terminator from the "button" element on your submit button and I removed the extra quote on the textbox with an id of "number". Moving the button inside or outside of a form-group made no difference for me.

While testing, and looking at your link, I noticed that bootstrap wrapped your form on the appropriate media width boundary. Make sure that your form is not just wrapping, like it's supposed to. If it's wrapping, reduce the horizontal footprint of your form using collapse.

There is an example in the bootstrap docs here... http://getbootstrap.com/components/#navbar-default