CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Chud37
Chud37

Reputation: 5007

Bootstrap display multiple forms inline

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?

Upvotes: 5

Views: 10647

Answers (7)

Mike Grove aka Theophilus
Mike Grove aka Theophilus

Reputation: 1255

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.

Upvotes: 0

btz
btz

Reputation: 7

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

Upvotes: 0

Sangrai
Sangrai

Reputation: 687

Here is solution:

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

Hope this will help.

Upvotes: 6

nimishxotwod
nimishxotwod

Reputation: 335

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

Upvotes: -1

Damon Jones
Damon Jones

Reputation: 49

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

Upvotes: 2

Dixit
Dixit

Reputation: 1379

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>

Upvotes: 0

user8198431
user8198431

Reputation:

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

Upvotes: 0

Related Questions