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>
Related
Is there a way to ignore the order class on larger screens?
I have two inputs with a label that goes like this;
<div class="row">
<div class="col-12 col-md-5 order-first order-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2 order-last order-md-10"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5 order-first order-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5 order-last order-md-10">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>
They work just as I want them to on mobile, however, I need them to look like they were as before I have added the order classes which look like
<div class="row">
<div class="col-12 col-md-5"><label class="form-label">Label for 1st input <small>(Explanation for first input)</small></label></div>
<div class="col-12 col-md-5 offset-md-2"><label class="form-label">Label for 2n input<small>( Explanation for second input )</small></label></div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
<div class="col-12 col-md-2 align-self-center">
<p class="form-group text-center mt-3">and/or</p>
</div>
<div class="col-12 col-md-5">
<div class="form-group mt-2">
<input autocomplete="off" type="text" class="form-control" placeholder="">
</div>
</div>
</div>
Ordering is correct on mobile and just as I want, but it breaks the desktop order. Ordering without the order classes is perfect on the desktop for me, but it breaks the mobile order. Is there a way to activate the order classes on mobile only?
Try to add class like .order-1 insted of order-first and all related classes hope that work for you.
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 have a form that uses Bootstrap 3. My layout should follow the below:
On small screens, Display 1 input per row with the label stacked above the input
On medium devices, Display 2 input per row with the label to the left of each input
On large devices, Display 3 inputs per rom with the label to the left of each input
Rows that contain a textarea, should always be displayed with one input per row
I have this almost working with one small quirk. Everything works well with all of the elements lining up like the below on all bootstrap breakpoints up to md like this:
However, when I hit the lg breakpoint, the text area and it's label no longer line up with the other element like this:
Looking at the grid I've set up I can see why this happens but I cant seem to find a pattern that fits my needs without causing this issue. I know I can start hacking away with CSS like negative margins to force the layout but I feel like there is a better way.
How can I fix this?
Here is a jsFiddle showing the issue
And the relevant HTML:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-12 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-2 col-lg-2 left-on-mobile">
<label for="" class="control-label ">Textarea</label>
</div>
<div class="col-md-10 col-lg-10">
<textarea class="form-control form-input"></textarea>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-5 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-7">
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
For the first Input field change the col-lg-* classes from 5 and 7 to 6 and 6. That will make its <label> tag to align with the one in the previous row.
<div class="col-sm-6 col-lg-4 input-row clone-icon text-right">
<div class="form-group">
<div class="col-md-4 col-lg-6 left-on-mobile">
<label for="" class="control-label ">Input Field</label>
</div>
<div class="col-md-8 col-lg-6">
<input type="text" class="form-control">
</div>
</div>
</div>
Demo link here
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 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>