I am designing a form using Bootstrap but my labels are of variable size which are causing my form to get distorted as marked in the screenshot.
I have used clearfix class & vertical-align style as well.
I don't want fixed height for my labels as they can of varying size. (e.g. 2, 3, 4 or even of more lines).
This is my code.
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 1 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 2 In fact the bigger label than all </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 3 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 4 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 5 </label>
<input class="form-control" type="text">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label> Label 6 </label>
<input class="form-control" type="text">
</div>
</div>
</div>
This is how I do it when forced to use bootstrap
Within your input 'row' you have an 'input-label' and 'input-element' which are col-6. This ensures that they take up 50% of the available space. The col-xs-12 ensures that they then stack at smaller browser widths (mobile).
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-6 col-xs-12 input-label">
<label for="xxx">Input label</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 input-element">
<input type="text" name="xxx" id="xxx" class="col-md-12 col-sm-12 col-xs-12" />
</div>
</div>
</div>
Related
I have this row using horizontal form to show the label on the left side. On Mobile i want the label to occupy one row, and I want the 3 textboxes to remain on the same row, how to acheive this? They will stack on top of each other still
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
You can utilize the equal-width class .col:
<div class="form-group row">
<label for="dobDay" class="col-12 col-md col-form-label" />
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
<div class="col">
<input />
</div>
</div>
You set col-12 on Date of Birth label so that it would occupy a row for extra small devices (less than 576px). Since other 3 columns are set with col, they will take up equal width on their own row. That would give you the col-sm-4 effect.
On medium devices and up, the Date of Birth label, with col-md, will join the equal-width group as well. That would give you the col-md-3 effect.
demo: https://jsfiddle.net/davidliang2008/yr5gp6kq/8/
That stacking was because you didn't mention breakpoints for xs devices.
<div class="row">
<div class="col-sm-12">
<div class="form-group row">
<label for="dobDay" class="col-xs-12 col-sm-12 col-md-3 col-form-label">Date Of Birth</label>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobDay" placeholder="DD">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobMonth" placeholder="MM">
</div>
<div class="col-xs-4 col-sm-4 col-md-3">
<input type="number" class="form-control" id="dobYear" placeholder="AAAA">
</div>
</div>
</div>
</div>
Can some explain to me why this is not working... I just want the input boxes to be on the same line as the labels. I cannot see what I am missing here.
<section id="student-info">
<div class="col-xs-12"><h4 class="section_title">Student Information</h4></div>
<div class="row">
<div id="name" class="col-xs-4 col-sm-4">John Doe</div>
<div id="email" class="col-xs-4 col-sm-4">jdoe#nowhere.com</div>
<div id="colgateid" class="col-xs-4 col-sm-4">ID: 123456</div>
</div>
<div class="row">
<div id="dg-leave" class="form-group col-xs-4 col-sm-4 col-lg-4">
<label for="SG-Leave" class="control-label">SG/Leave: </label>
<input class="form-control" name="SG-Leave" type="text" tabindex="1" id="SG-Leave" placeholder="SG/Leave"></div>
<div id="reg-id" class="form-group col-xs-4 col-sm-4 col-lg-4">
<label for="reg-id" class="control-label">Registration ID: </label>
<input size="10" class="form-control" name="reg-id" type="text" tabindex="1" id="reg-id" placeholder="Reg ID"></div>
<div id="classyear" class="form-group col-xs-4 col-sm-4">Class of: 2016</div>
</div>
</section>
Example: https://jsfiddle.net/pkhr3wys/5/
I have a form made in Bootstrap V3. The designer wants some rows to contain two inputs, while other rows contain only one.
I've made a fiddle here.
https://jsfiddle.net/06qk4wh4/
<div class="form-group col-sm-12">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
<div class="form-group col-md-12">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control col-sm-12" />
</div>
</div>
The problem is that in the row with two inputs I get an alignment error (shown in red in the image below). It works great in col-sm-x, because then it uses the full width. But in col-md-x I try to render two inputs in one row, and I get an "alignment error" because of the percentage calculation.
Is there a simple solution for this? It must be a pretty common problem?
You can try this code.
It seems to fix your problem. I just add a row after your div(col-sm-12)
<div class="form-group col-sm-12">
<div class="row">
<label class="control-label col-sm-2">
Label 1
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 2
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-sm-12 col-md-6">
<div class="row">
<label class="control-label col-sm-2 col-md-4">
Label 3
</label>
<div class="col-sm-10 col-md-8">
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="form-group col-md-12">
<div class="row">
<label class="control-label col-sm-2">
Label 4
</label>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
Hope this is the solution :)
Richie
I am trying to create a form with bootstrap where I am trying to fill two fields in two column of same row and third field in another row with same width as above row. but some how the third field is not occupying the entire row width as the above field.
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
<br>
<form>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-3">
<label>Name</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">
<label>Phone</label>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-9">
<input type="text">
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">
<label>Email</label>
</div>
<div class="col-lg-11 col-md-10 col-sm-9 col-xs-8">
<input type="email">
</div>
</div>
</div>
</div>
Here is my jsfiddle
I am trying to display name and phone fields on same row, where as email to take up the entire row below name and phone fields. but email field is not taking the entire row.
I think you're trying to do this.
#media (min-width: 767px) {
#soForm .soForm {
margin: 10px auto;
}
#soForm .control-label {
margin-top: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 class="form-page">PLEASE, ENTER YOUR DETAILS</h2>
</br>
<form id="soForm" name="soForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="name" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone</label>
<div class="col-sm-4 soForm">
<input type="text" class="form-control" id="phone" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" />
</div>
</div>
</form>
</div>
I have the following HTML in bootstrap 3 that gives the following display:
The HTML it as follows.
In one row i have only one field, while on others I have 3. Is it possible with bootstrap to make all rows position "first" label on the same position? In this case, "Project Name", "Location", and "Project Value" will be aligned same position.
Thanks
<div class="container">
<div class="row" id="mainForm">
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
<div class="row top-buffer">
</div>
</div>
In the first two div.row you the .form-group with .col-sm-6. If you change it to .col-sm-4 you will get the alignment you want.
E.g.:
<div class="col-xs-12 col-sm-4">
<div class="form-group">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
Here is a working demo http://jsfiddle.net/wmyuj7gy/.
EDIT:
If you want the first two rows to be full width you need to change the .col-sm-4 to .col-sm-12 and the inner elements to have the .col-sm-1 and .col-sm-11 class.
Also, you should nt use the .form-group class in the same div with the .col-sm-* classes because is messes with the grid's paddings.
Here is a fixed example of your code, with also some other changes in the last row to make the form perfectly aligned http://jsfiddle.net/wmyuj7gy/3/
try this one -
<form class="form-horizontal">
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectName" class="control-label col-sm-4 col-xs-3">Project Name</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectName" placeholder="Name of Project">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtLocation" class="control-label col-sm-4 col-xs-3">Location</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtLocation" placeholder="Location">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValue" class="control-label col-sm-4 col-xs-3">Project Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtprojectValueUsd" placeholder="Project Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtCCCValue" class="control-label col-sm-4 col-xs-3">CCC Value</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtCCCValue" placeholder="CCC Value (US $)">
</div>
</div>
<div class="form-group col-xs-12 col-sm-4">
<label for="txtProjectValueLocal" class="control-label col-sm-4 col-xs-3">Project Value Local</label>
<div class="col-sm-8 col-xs-9">
<input type="text" class="form-control" id="txtProjectValueLocal" placeholder="Project Value Local Currency">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>