Bootstrap display multiple forms inline

Question

There must be a way to display one form next to another in Bootstrap without having to manually set the CSS to display:inline-block.

I've created a fiddle here.

I've used the form-inline class but that doesnt seem to make much of a difference. Am I missing something?

Answer 1

Here is solution:

Add a class,"pull-left" with form-inline.

Hope this will help.

Answer 2

You could put two forms side by side using the grid system. For example:

<div class="container">
 <div class="col-xs-6">
  <form class='form-inline'>
    <div class="input-group">
      <input type="date"class="form-control">
      <span class="input-group-btn">
        <button type='submit' class="btn btn-secondary" type="button">View</button>
      </span>
    </div>
  </form>
</div>
<div class="col-xs-6">
  <form class='form-inline'>
    <div class="input-group">
      <input type="date"class="form-control">
      <span class="input-group-btn">
        <button type='submit' class="btn btn-secondary" type="button">View</button>
      </span>
    </div>
  </form>
</div>

See a working example here on JS Fiddle