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">
Related
This may seem like I'm missing something super simple, but I cannot for the sake of me figure this out.
I have a <form> wrapped inside a <div class="form">, and for some reason, in the browser, the form, and the div, have a height of 0, and all the content is overflow. When I inspect the document from the browser, the browser does not recognize this div or form.
Here's the problem area here:
Also, you can inspect it at this website here: Web page
<div class="form">
<form>
<div class="contact">
<label for="first">First Name:</label>
<input id="first" type="text" placeholder="First Name"><br>
<label for="last">Last Name:</label>
<input id="last" type="text" placeholder="Last Name"><br>
<label for="tel">Phone Number:</label>
<input id="tel" type="tel" placeholder="(###) ###-####"><br>
<label for="email">Email:</label>
<input id="email" type="email">
</div>
<div class="address">
<label for="address-1">Address</label>
<input id="address-1" type="text" placeholder="Address Line 1"><br>
<label for="address-2">Address, Line 2</label>
<input id="address-2" type="text" placeholder="Address Line 2"><br>
<label for="city">City:</label>
<input id="city" type="text" placeholder="City"><br>
<label for="state">State:</label>
<select id="state">
<optgroup>
</optgroup>
</select></br>
<label for="zip">Zip Code:</label>
<input id="zip" type="text" placeholder="01234">
</div>
</form>
</div>
Does you talk about that the div and form have height:0 and the content overflow?
If so, it is because the content divs have float css attributes. to fi it, you have to add at the end of the contents div with style clear:both
<div class="form">
<form>
<div class="contact">
...
</div>
<div class="address">
...
</div>
<div style="clear:both"></div>
</form>
</div>
Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
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
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>
I am trying to make a pretty form that will work boostrap-responsive.css for mobile use. Before I used tables, and it worked fine without bootstrap-responsive, but now it becomes very ugly when scaled down.
What I'm trying to accomplish:
Get headline/label for each input to be in top(horizontal).
Aligned right side(so it will look pretty on a phone).
Have glyphicons prepended - this is what it makes difficult, since with them I can't format it correctly
If I am too unclear of what I want to accomplish, you can also take a look at my super hightech picture that describes the form:
http://i.imgur.com/xcvL0hp.jpg
My code half working code is:
<form class="form-vertical" ....>
<fieldset>
<div class="row-fluid">
<div class="span8 input-prepend">
<label class="control-label" for="title">Title</label>
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
<div></div>
<div class="span2 input-prepend">
<label class="control-label" for="price">Price</label>
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="controls">
<label class="control-label" for="description">Description</label>
<div class="input-prepend">
<span class="add-on"><i id="descriptionicon" class="icon-minus-sign"></i>/span>
<textarea name="description" rows="6" class="field span6" id="descriptionfield"></textarea>
</div>
</div>ยจ
</fieldset>
</form>
I am not sure I formatted it correctly for stackoverflow(this is my first question) so it is here too with syntax highlighting: http://pastebin.com/LzN1vbYi
I know there are tons of answers to very similar question, but that prepended glyph makes none of the code work. I tried around 15 different approaches.
you should try this form
<div class="row-fluid>
<div class="span12>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<span class="add-on"><i id="titleicon" class="icon-minus-sign"></i></span>
<input type="text" name="title" id="title" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="price">Price</label>
<div class="controls">
<span class="add-on"><i id="priceicon" class="icon-minus-sign"></i></span>
<input type="text" id="price" name="price"/>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>`
</form>
</div>
</div>
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.