How do we place form fields horizontally using Twitter Bootstrap
I tried below HTML code. But it shows one by one like below
First Name - Text Box
Last Name - Text Box
Search
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="first">First Name</label>
<div class="controls">
<input type="text" id="first" placeholder="firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastname">Last Name</label>
<div class="controls">
<input type="text" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Search</button>
</div>
</div>
</form>
I want First Name and Last Name should be placed horizontally in first line and in next line Search Button.
Like this
First Name - Text Box Last Name - Text Box
Search
Add inline class to First name, Last name control-group div:
<div class="control-group inline">
CSS
.inline {
display:inline-block;
}
Working fiddle http://jsfiddle.net/GgSRN/
try this
<form class="form-group form-inline">
<label class="control-label" for="first">First Name</label>
<input type="text" id="first" placeholder="firstname">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name">
<div>
<button type="submit" class="btn">Search</button>
</div>
</form>
check bootstrap inline Form
it will be good to go as you said.
Use CSS in a separate file to style your html. I'd personally wrap them in a <div class="row"> using Bootstrap and use one of those for each 'row' you want to create.
Related
I'm trying to create a form in Bootstrap and need the first name and last name fields to be inline where as the rest of the form needs to be as it is.
I got the inline functionality to work. However, the inline text fields (names) are not aligning properly.
In the image above, I need the combined width of the name fields to be same as Phone, Email and Password fields, which is not happening. The question is how to get that alignment to work?
The code for the form is below:
<form role="form" class="register-form cf-style-1">
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="First Name" required>
</div>
</div>
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">Last Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
<div class="field-row">
<label>Phone</label>
<div class="input-group">
<div class="input-group-addon">+91</div>
<input type="text" class="le-input" maxlength="10" placeholder="Phone Number">
</div>
</div>
<div class="field-row">
<label>Email</label>
<input type="email" class="le-input" placeholder="Email Address" required>
</div><!-- /.field-row -->
<div class="field-row">
<label>Password</label>
<input type="password" class="le-input" placeholder="Password" required>
</div><!-- /.field-row -->
<div class="buttons-holder">
<button type="submit" class="le-button huge">Sign Up</button>
</div><!-- /.buttons-holder -->
</form>
You should be able to remove the style of the inline-block. Then just add the class col-md-6 to each of the divs you want to be side by side. This will cause them to be a two column layout for medium displays then they will be on their own line on smaller displays. You can read more about columns here:
http://getbootstrap.com/css/#grid
Not sure what css you have to go along with this, might be useful if we can see a link to this.
But you could try adding width: 50% to the First and Last name input tags.
input {width: 50%;}
I would target these inputs by adding classes to the ones you want to change, as not to affect the other input tags
<div class="control-group">
<div class="controls form-inline">
<label for="inputKey">First Name</label>
<input type="text" class="le-input" placeholder="First Name" required>
<label for="inputValue">LastName</label>
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
I was my form labels to appear to the left of my textboxes (labels all right aligned and textboxes all left aligned).
Right now they are all appearing on top of my textboxes:
<form action="" method="post">
<div class="form-horizontal">
<label for="test">Test</label>
<input id="test" type="text" class="form-control" disabled/>
</div>
<div class="form-horizontal">
<label for="more">More</label>
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Using bootstrap's grid. Here is a link to bootply.
<form class="form-horizontal" action="" method="post">
<label class="col-sm-2 control-label" for="test">Test</label>
<div class="col-sm-10">
<input id="test" type="text" class="form-control" disabled/>
</div>
<label class="col-sm-2 control-label" for="more">More</label>
<div class="col-sm-10">
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Without your CSS I won't be able to tell for sure, but try:
label {
display: inline;
}
It would be helpful if you provided the CSS as well as the HTML.
Answer / example is right in the bootstrap examples:
http://getbootstrap.com/css/#forms-horizontal
You can match your form structure to it.
I have been unable to get First and Last name fields on the same line, and at half the width of the other lines - email, password, etc.
I have tried various changes to including the addition of "form-horizonal", col-xs-6, but didn't solve it.
I would like to make the well look like this (currently the are all the same sized, stacked on top of each other):
Excerpt of index.html.erb:
<form class="form-signin col-sm-4 well" role="form">
<h2 class="form-signin-heading">Sign Up</h2><hr>
<form class="form-inline" role="form">
<form class="form-horizontal">
<div class="form-group col-xs-6">
<label class="sr-only" for="#">First name</label>
<input type="text" class="form-control" id="#" placeholder="First name">
</div>
</form>
<form class="form-horizontal">
<div class="form-group col-xs-6">
<label class="sr-only" for="#">Last name</label>
<input type="text" class="form-control" id="#" placeholder="Last name">
</div>
</form>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Type email again">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<div class="">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>
</form>
All help greatly appreciated.
Full index.html.erb -
https://gist.github.com/attatae/11022245
Bootstrap 3 Grid Overview (yes, I looked too):
http://getbootstrap.com/css/#grid
Another related question that I looked at, but didn't solve:
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?
Here is what I came up with
I hasten to add that the solution may be different because of the fact that it's bootstrap. My solution doesnt take that into consideration at all, because I'm not familiar with it. It may be as easy as changing some of the classes. Good luck to you...
I have this form:
<!-- First Name-->
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Last Name-->
<div class="control-group inline">
<label class="control-label">Last Name</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Telefonnumber-->
<div class="control-group">
<label class="control-label">Telefonnumber</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
<!-- Street-->
<div class="control-group">
<label class="control-label">Street</label>
<div class="controls">
<input id="textinput" name="Product Name" class="input-xlarge" type="text">
</div>
</div>
I want to display Last Name next to First Name and under these two field the Telefonnumber.
How can I realize this in twitter bootstrap?
btw the jsfiddle
Bootstraps has a few example form layouts that you can use here.
As per their documentation, use controls-row when you want multiple on a line. (form-inline is for the whole form to be inline). You will want to read their scaffolding documentation before going forward with using their classes.
Updated jsfiddle
PS.. HTML pointers
Don't duplicate id (and name if you can avoid it). For example, id="textinput" should be unique across the entire page. The name doesn't have to be unique, but it's best practice to just match the id.
Add for attribute to labels.
I am using Twitter Bootstrap. In the forms I can do horizontal layouts and vertical layouts but the class is on the <form> tag. So, how to I do a little of both where I want to save space and put a couple of input boxes horizontally and the rest vertically?
I have a form that looks like this:
Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]
But I want it to look something like this:
Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]
Please help with the CSS.
Here is my code:
<form class="form-horizontal">
<fieldset>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for="Address">Mailing Address</label>
<div class="controls">
<input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label" for="City">City</label>
<div class="controls">
<input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
</div>
</div>
<div class="control-group">
<label class="control-label" for="State">State</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PostalCode">Zip</label>
<div class="controls">
<input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Country">Country</label>
<div class="controls">
<input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
</div>
</div>
</fieldset>
</form>
This worked for me
<div class="control-group">
<label class="control-label" for="inputPLZ">PLZ*</label>
<div class="controls">
<input type="text" class="input-mini" id="inputPLZ">
Ort*
<input type="text" class="input-medium" id="inputOrt">
</div>
</div>
It is rendered like this
Wrap state, zip and country in a div, then float the child elements left and they should align. Though I have no experience with Bootstrap so don't know if that will affect anything
Helps to understand how bootstrap is set up.
The .control-label class is the left side indicator of a form. This takes the left 140px of the form and floats left. The .controls class is the right side of container of a form, and simply applies a margin left of 160px to itself without floating.
Knowing this, you can treat Bootstrap like normal HTML. You can simply include all the inputs in the same control, like so:
<div class="control-group">
<div class="controls">
State: <input class="span2" id="state" name="State" type="text" value="UT">
Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
Country: <input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
If you want the alignment to match up, use a little bit of trickery by making the first label in your horizontal set the .control-label like so:
<div class="control-group">
<label class="control-label">State:</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">