I have a form with bootstrap:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div>
<div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
This form gives me this result:
But if i do this change in my editor lines it changes the structure also:
<form class="form-inline">
<div class="form-group barkodiK">
<input type="text" class="form-control barkodi" placeholder="Barkodi">
</div>
<div class="form-group produktiK">
<datalist id='produktet'></datalist>
<input list="produktet" class="form-control produkti" onkeyup="merrProduktet(this)" placeholder="Produkti">
</div><div class="form-group pershkrimiK">
<datalist id='pershkrimiProdukteve'></datalist>
<input list="pershkrimiProdukteve" class="form-control pershkrimi" placeholder="Pershkrimi">
</div>
<div class="form-group cmimiK">
<input type="text" class="form-control cmimi" readonly placeholder="Çmimi">
</div>
</form>
And i have this result:
I dont even know why this thing affects the CSS of HTML. Any help?
Because the form inputs are displayed inline, the extra space you removed in the second file caused the inputs to move closer together:
</div><div class="form-group pershkrimiK">
This is what it should be if you want the space between the boxes:
</div>
<div class="form-group pershkrimiK">
When things are displayed inline, whitespace between/around elements is visible.
Related
Working html code: UPDATED
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-md-4">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
<div class="col-md-2">
<button class="form-control btn btn-info">Hello world</button>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
How can I format my lable/input field align? below is html along with screen shots how it renders after I run the page:
what I want the output to be is:
Employee Name: XXXXXXXXXXXXX
My Owning Location: XXXXXXXXXXXXX
Manager Name: XXXXXXXXXXXXX
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
<div class="col-md-12" style="margin: 10px;">
<div class="form-group">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-lg-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="col-md-12" style="margin: 10px;">
<div class="form-group">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-lg-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
I've solved this for you and created a codepen editor for this.
The code will look lke,
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
<form class="form-horizontal ng-pristine ng-valid ng-valid-required" role="search">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">Employee Name:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label col-md-6" for="inputEmail">My Owning Location:</label>
<div class="col-md-6">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
What I've done is wrap your form group elements into row classes which makes children appear in a row, and for the form-group classed element I've set it to col-md-12 which does make it full width of the grid.
I've also removed navbar-form class from your form element
I've heard my colleague (front-end guy) saying to use row and child elements of them as grid columns as a standard, i don't know the validity of that statement, but it works for real! :)
And a note, do not use inline styles which makes things lot worse and untraceable while looking at the code itself.
I added the corresponding row-fluid to reset the grid for the label and input boxes.
https://jsfiddle.net/gyod/7mgtfk3k/4/ Here is one example.
<form class="container row-fluid navbar-form form-horizontal ng-pristine ng-valid ng-valid-required" role="search" style="padding:0">
<div class="col-md-12" style="margin: 10px;">
<div class="row-fluid">
<label class="control-label col-xs-3" for="inputEmail">Employee Name:</label>
<div class="col-xs-9">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="John Edward Jr.">
</div>
</div>
</div>
<div class="col-md-12" style="margin: 10px;">
<div class="row-fluid">
<label class="control-label col-xs-3" for="inputEmail">My Owning Location:</label>
<div class="col-xs-9">
<input class="form-control" disabled="disabled" id="inputEmail" type="email" value="abc123 234sd 343 scott 359 to-34-23-3">
</div>
</div>
</div>
</form>
Try to put the label tag inside div class="col-xs-6". Then you can get a horizontal aligned elements of each div.
If you want to make it properly align, you can set default width for the label and use bootstrap built-in class for alignment.
I'm using bootstrap to display a form-inline. However, I cannot figure how to remove the spaces between the form inputs, it always leaves a ~4p blank. I tried to adjust it using margin, in vain. Any idea why ?
Here's the form
<div class="container">
<form id="msform" class="form-inline" role="form" method="post">
<!-- progressbar -->
<div class="form-group">
<input type="hidden" id="form_departure" name="form[departure]" required="required" placeholder="Départ" class="form-control"><input type="text" id="autocompleter_form_departure" name="autocompleter_form[departure]" required="required" placeholder="Départ" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<input type="hidden" id="form_arrival" name="form[arrival]" required="required" placeholder="Arrivée" class="form-control"><input type="text" id="autocompleter_form_arrival" name="autocompleter_form[arrival]" required="required" placeholder="Arrivée" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<select id="form_passengers" name="form[passengers]" required="required" class="fly_confirm form-control"><option value="1" selected="selected">1 passager</option><option value="2">2 passagers</option><option value="3">3 passagers</option><option value="4">4 passagers</option><option value="5">5 passagers</option></select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">CHERCHER</button>
</div>
</form>
</div>
Inline elements are sensitive to the white space in your code. The easiest solution is to simply remove it.
Ex: </div><div class="form-group">
bootply example
An alternative is to float the inputs:
.form-group {
float:left;
}
bootply example
So I'm working in bootstrap for the first time and I'm making a form, like so:
<div class="input-group col-xs-2">
<label>Voornaam:</label>
<input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
<label>Achternaam:</label>
<input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
<label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
<div>
<div class="form-inline">
<div class="form-group col-xs-9">
<input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
</div>
<div class="form-group col-xs-3">
<input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
</div>
</div>
</div>
</div>
Now, I've got a problem with the indentation of the "form-inline" part. For some reason, it's more indented than the other parts of the form.
image of result: http://puu.sh/g874J/2579b314e4.png
Any idea why this is the case and how I can make it so that the indentation is the same for every part of the form?
Your col-xs-X class adds an extra padding to div.
I have a form with some inline inputs but the size of the label seems to dictate the size of the input box.
HTML
<div class="form-inline">
<div class="form-group">
<label for="address3">Town</label>
<input type="text" name="sublocality" class="form-control fixedWidth" id="address3" placeholder="town">
</div>
<div class="form-group">
<label for="address4">City</label>
<input type="text" name="locality" class="form-control fixedWidth" id="address4" placeholder="City">
</div>
</div>
Result
i would like all the input boxes to be the same width.
Use a col-sm-* in all of your form-group, for example:
<div class="form-group col-sm-3">
<label for="address3">Town</label>
<input type="text" name="sublocality" class="form-control fixedWidth" id="address3" placeholder="town">
</div>
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:
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
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>
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 */
}
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>
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>
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>