What is the correct way in bootstrap to have proper alignment of inputs and labels across grids?
I would like to have the labels to be placed exactly the same as the first col.
See my plunk:
http://plnkr.co/edit/jaMAp38Rr1g7BLW3R5AI
<div class="row">
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;">
<label>OK</label>
</div>
</form>
</div>
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline" role="form">
<div class="form-group">
<label>NOK</label>how to align it to the same as text 'OK'?
</div>
</form>
</div>
</div>
Use .form-control-static
Plunkr: http://plnkr.co/edit/0uVL2IIglzV0mrhqZdla?p=preview
HTML:
<div class="row">
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<form class="form-inline">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width:80px;"/>
<label for="exampleInputEmail1">OK</label>
</form>
</div>
<div class="col-sm-6" style="border-style:solid;border-width:1px;">
<p class="form-control-static"><b>NOK</b></p>
</div>
</div>
Since bootstrap 4, this changed to
.form-control-static
CHANGED TO:
.form-control-plaintext
https://getbootstrap.com/docs/4.0/migration/#forms-1
Related
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</div>
Is there any way to place the labels closer together to the controls using horizontal forms with the below code?
I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<div class="row">
<div class="form-group nopadding">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group nopadding">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group nopadding">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
</div>
</div>
I think this is what you want.
FIDDLE
You can reduce the space between the labels and the inputs by adding a negative margin to the labels.
CSS:
label {
margin-right: -20px;
}
HTML:
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password"></input>
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
</div>
</div>
</form>
</div>
Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.
The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.
Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.
Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.
Here is the link to my Plunker: link
The goal is to align the Sample Parking Ticket link with the textbox.
Please note the leading label has no class like col-xs-1 or something.
How can I achieve that?
You can use a bootstrap horizontal form.
Here is a plunkr:
<h1>Citation Form</h1>
<form name="citationSearchForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="citationNumber" class="col-sm-3 control-label">Citation Number:</label>
<div class="col-sm-6">
<input type="text" name="citationNumber" class="form-control" id="citationNumber" placeholder="#" required="">
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i>Search</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 text-right">
<a id="lnkSample" href="#">Sample Parking Ticket</a>
</div>
</div>
</form>
Here I have a bootstrap form v3 and I try to make this form to be inline so ha,ar,m2 to be inline... I have:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="naziv">Naziv</label>
<div class="col-md-4">
<input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ha">Povrsina</label>
<div class="col-md-2">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ar"></label>
<div class="col-md-2">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="m2"></label>
<div class="col-md-2">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
</fieldset>
</form>
But how I can put #ha, #ar, #m2 elements inline so in the same row?
Any idea?
I try with form-inline but dont work.
Here is a fiddle
In order to keep the inputs in one row, you could put the columns containing .input-group in one form-group element, as follows:
<div class="form-group">
<label class="col-md-3 control-label" for="ha">Povrsina</label>
<div class="col-md-3">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
WORKING DEMO.
Note that you should change the class names of the columns within your own demo to prevent exceeding the 12-column grid.
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>