Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3: Two forms on the same line

I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.

<h1>Register</h1>


<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">

here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line

like image 722
Aidan Avatar asked Sep 30 '13 08:09

Aidan


People also ask

How do I make two forms side by side in bootstrap?

The technique to create two forms horizontally is simple. You simply code two <div class=”span6″> columns and insert the required form markup. Do not add the . well class to the span columns or else it breaks up everything.

How do I get two lines on the same line in HTML?

How to make two forms side by side in html. style="float:left;" in the one and style="float:right;" in the other... 1. Wrap your forms in a <div> and apply float: left; to the wrapper: <div style="float:left;"> <form> input,submit etc </form> </div> 2.

How do I create a form in one line?

To display the form fields in a single line, navigate to Settings » General in your form builder and add the CSS class inline-fields to the Form CSS Class field. Then, to reduce the height of your form, open up each field's Advanced section and select the Hide Label option.

Can there be two forms in one HTML page?

You can have as many forms as you need on a HTML page. As long as your script for processing the forms knows which form is which and processes them accordingly. You may have multiple scripts, one for each form.


1 Answers

Reference the inline form styling on Bootstrap's site.

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
</form>

Alternatively, you can also use columns to put form elements next to one another:

<div class="row">
  <div class="col-lg-2">
    <input type="text" class="form-control" placeholder=".col-lg-2">
  </div>
  <div class="col-lg-3">
    <input type="text" class="form-control" placeholder=".col-lg-3">
  </div>
  <div class="col-lg-4">
    <input type="text" class="form-control" placeholder=".col-lg-4">
  </div>
</div>
like image 185
cbeckner Avatar answered Oct 11 '22 02:10

cbeckner