CODEWITHSUNDEEP
bootstrap-4
Phil
Phil

Reputation: 43

Bootstrap 4 display multiple forms inline

Is there a way to easily display one form next to another in Bootstrap 4 ?
The following code doesnt work :-/

    <div class="bd-example">
        <form id="validate-form" class="form-inline pull-right" method="post" role="form">
            <input type="hidden" name="get_final_form">
            <input class="btn btn-outline-primary btn-outline-success" name="btn" type="submit" value="Validate" />
        </form>     
        <form id="new-form" class="form-inline pull-right" method="post" action="index.php" role="form">
            <input class="btn btn-outline-primary btn btn-outline-primary" name="btn" type="submit" value="New" />
        </form>
    </div>

Upvotes: 1

Views: 2784

Answers (3)

RamNiwas Sharma
RamNiwas Sharma

Reputation: 347

`<div class="container">
        <ul class="list-inline">
            <li class="list-inline-item">
                <form id="validate-form" class="form-inline pull-right" method="post" role="form">
                    <input type="hidden" name="get_final_form">
                    <input class="btn btn-outline-primary btn-outline-success" name="btn" type="submit" value="Validate" />
                </form>
            </li>
            <li class="list-inline-item">
                <form id="new-form" class="form-inline pull-right" method="post" action="index.php" role="form">
                    <input class="btn btn-outline-primary btn btn-outline-primary" name="btn" type="submit" value="New" />
                </form>
            </li>
        </ul>
    </div>`

Upvotes: 4

Abdul Rehman Zafar
Abdul Rehman Zafar

Reputation: 64

Divide your space in two columns and put the respective form in it

<div class="row">
  <div class="col-md-6">
     <form id="form1"></form>
  </div>

  <div class="col-md-6">
      <form id="form2"></form>
  </div>
</div>

Upvotes: 1

dealwap
dealwap

Reputation: 721

You are not using bootstrap column the right way.

do this: 

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Upvotes: 0

Related Questions