What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Add a comment
|
6 Answers
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
8 Comments
Iftah
You can also add the form classes on divs, in my case I used vertical form class on a span6 div and an horizontal form class on a span12 div
Tomislav Muic
This works for bootstrap2. For bootstrap 3 visit: stackoverflow.com/questions/18429121/…
darkzangel
In bootstrap 3, if there is a gap underneath the input, remove "form-group". It add a 15px gap at the bottom of each div that you use it with.
Sebastian
You don't need to mix form-group with row at Key+Value example. @rap-2-h: You can copy paste the example code and click run.
Tony Wall
This works but I was able to simplify it in the current version of Bootstrap 3... It seems key to this solution just to put any input controls inside a div, else the col-xx grid layout doesn't work. It was not necessary to nest the form-group, the parent col-xx-# can share the same div and there is no need for the "row" class as the parent form is already a form-horizontal (100%).
|
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
9 Comments
Cédric Guillemette
It may not work for you because of the form-control class which sets "display: block". If you override it to "display: inline-block" it should work.
Sebastian
This is not working. Try to do what the question asks, this is not possible with form-inline.
Tony Wall
The only problem with this is the sub-area is not expanded to full width and any attempt to use grid sizing will be squashed relative to the minimum content width required. The other solution is better just without so many divs (see my comment there).
ymakux
You must wrap all form-groups in form-inline class
emragins
jsfiddle.net/9637fywb This does not seem to act as desired -- using the current latest bootstrap CDN (3.3.5). This example also doesn't account for two labels inside of the "inline" section. Perhaps the fiddle is missing a wrapper of some sort, but it seems like that should be included in the answer, if so.
|
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Comments
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
Comments
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
Comments
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>
