Bootstrap display multiple forms inline - html

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

Answer 3

You should use input-group class, as shown here:innput-group

Answer 4

By applying col class in forms you will get the proper result.
<div class='container'>
<div class='row m-b-20 title'>
<div class='col-sm-6'>
<h1>Test page</h1>
</div>
<div class='col-sm-6 text-right'>
<form action='/error-logs' method='POST' class='input-group pull-left'>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</form>
<form action='/error-logs' method='POST' class='input-group pull-right'>
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
</span>
</div>
</form>
</div>
</div>
</div>

Answer 5

i-ve stumbled on this searching for an aswer for similar problem
i-ve solved it by doing this
<form action="cosprocess.php" method="post" style="float: left; padding: 1px;">

Answer 6

Bootstrap 3 was likely used when this question was originally asked. Sangrai's answer of using pull-left may have worked well in 3, but unfortunately it does not in Bootstrap 4 when there are too many form controls to fit onto a single line. The controls don't align well.
The following has worked well for me in Bootstrap 4. It may be risky, though, since the Bootstrap documentation says nothing about having an inline form within an inline form.
<div class="form-inline">
<form class="form-inline">
<!-- First set of form controls go here. -->
</form>
<form class="form-inline">
<!-- Second set of form controls go here. -->
</form>
</div>
FYI - The Bootstrap 4.6 documentation says that pull-left was removed because it was redundant to float-left.

Answer 7

Make the parent div come under a row and have 12 col length for all vw.
Use buttons after input field and put all of them in a single form with class in-line.
fiddle
`
<div class="input-group">
<input type="date" name='fromdate' class="form-control">
<span class="input-group-btn">
<button type='submit' class="btn btn-secondary" type="button">View</button>
<button type='' name='' class='btn btn-default' alt='' title=''><span class='fa fa-floppy-o'></span>Button 1</button>
</span>
</div>
</form>`