I need to have 3 form input fields in a row with their respective labels on the top. When the row wraps I want the labels to go with the corresponding input and stay on top. I can get the labels to appear to the left of the input fields just fine. Just not on top of the input. How can this be achieved
Working with colums should do the trick. Try something like this
<div class="row">
<div class="col-xs-3">
<label>Label 1</label>
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<label>Label 2</label>
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-3">
<label>Label 3</label>
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
The trick is to use col-md-4 because Bootstrap is built on a 12 col grid system. That way on small and extra small devices the coloumns automatically collapse down to a single row. Here's my pen.
http://www.bootply.com/Eb85k7lOAx
<div class="container">
<div class="row">
<div class="col-md-4">
<label>One</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Two</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
<div class="col-md-4">
<label>Three</label>
<input class="form-control" placeholder=".col-md-4" type="text">
</div>
</div>
</div>
Related
SO i m trying to add input forms with different column width ..
Below is my code:
`<
div class="row">
<div class="col-md-10">
<div class="form-group form-inline col-md-6 col-lg-4">
<input type="text" name="cw" id="inputammino" value="A">
</div>
<div class="form-group form-inline col-md-4 col-lg-4">
<input type="text" name="cw2" id="inputcusti" value="42.010565">
</div>
<div class="form-group form-inline col-md-2 col-lg-4">
<input type="text" name="cw3" id="amiaci" value="K">
</div>
</div>
</div>
`
But instead of adding more column width to first column its adding it to last..What am I doing wrong?
I am using Bootstrap 3.3.7 and I have formatted your HTML as below by using BootStrap 3.3 Documentation and its working fine for me.
<div class="form-inline">
<div class="form-group">
<div class="col-md-6">
<input type="text" name="cw" id="inputammino" value="A">
</div>
<div class="col-md-4">
<input type="text" name="cw2" id="inputcusti" value="42.010565">
</div>
<div class="col-md-2">
<input type="text" name="cw3" id="amiaci" value="K">
</div>
</div>
</div>
I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.
Code:
Result. But I need the input fields and button next to each other in one row:
I tried using columns... didn't work
You can follow : Display two fields side by side in a Bootstrap Form
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
You can try below code
<div class="container content">
<div class='row'>
<form role="form" class="form-horizontal" method="post">
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search from this date">
</div>
</div>
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search till this date">
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
Back
</div>
</div>
</form>
</div>
</div>
When I try to nest two col-md-2 columns inside a col-md-4 column, the nested columns are too small, more like md-1 or less. I have used a row inside the outer tag as suggested by the documentation. I tried changing all the "md" to "lg" and "sm", but that didn't make any difference. How can I make my second row of nested inputs line up with my first row of non-nested inputs?
Screenshot:
Jsfiddle version (resize the result pane so that the controls are beside each other)
<div class="container" id="content">
<form>
<div class="row">
<div class="col-md-2">Label
<input value="nonnested input">
</div>
<div class="col-md-2">Label
<input value="nonnested input">
</div>
</div>
<br/>
<div class="row">
<div class="form-group col-md-4">
Label across two inputs, Label across two inputs
<div class="row">
<div class="col-md-2">
<input value="nested input 1" >
</div>
<div class="col-md-2">
<input value="nested input 2" >
</div>
</div>
</div>
</div>
</form>
</div>
Ah I get it now! The nested columns need to total to 12 to fill the width of the outer tag. So my second set of inputs should read like this:
<div class="form-group col-md-4">
Label across two inputs, Label across two inputs
<div class="row">
<div class="col-md-6">
<input value="nested input 1" >
</div>
<div class="col-md-6">
<input value="nested input 2" >
</div>
</div>
</div>
On the web project I am currently working on we are using Bootstrap 3. We are using the a form-horizontal layout with 3 columns- so the label appears left of the form input. The basic markup looks something like this:
<form class="form-horizontal">
<div class="form-body">
<div class="col-md-4">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class=col-md-4">
<!-- another input here -->
</div>
<div class="col-md-4">
<!-- another input here -->
</div>
</div>
</form>
Now the requirements I have just been given are for the form to have columns that keep their logical order and stack when the window is resized.
When the browser window is desktop sized it should look like this:
Column A field 1 Column B field 1 Column C field 1
Column A field 2 Column B field 2 Column C field 2
Column A field 3 Column B field 3 Column C field 3
But when the window is made smaller the form should resize and the columns stack like this:
Column A field 1
Column A field 2
Column A field 3
Column B field 1
Column B field 2
Column B field 3
Column C field 1
Column C field 2
Column C field 3
Is this possible with Boostrap?
Check out the documentation for Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid There are pretty useful examples for a lot of use cases.
You should be good adding the class col-xs-12 to your columns:
xs for the smallest width (or sm, depending on the width you need)
12 for the number of columns to span, while 12 is the maximum/the full available width
This should make them stack on the small screen.
Does this help?
You just don't want to overthink things. This layout behaves exactly how you would what it to if you add all three of your inputs for each column grouping are wrapped inside a single col-md-4. Each of those columns is now a single grid unit that will be collapsed at screen resolutions lower than 992px. At 992px and up, each column will be next to each other.
Now you simply want to nest your inputs inside those columns. Remember that when you nest col- classes in Bootstrap you have to add a row class or you'll get double padding. So, to figure out when to have your labels on the left and when to have them above the input, you'll need to probably do a little trial and error. In the example below, I found that for the length of the labels I was using, I needed to stack the labels for everything but the largest screens (1200px breakpoint in Bootstrap), otherwise the labels would wrap onto a second line. You can add a responsive reset after each input if you would prefer to have the labels wrap, but I didn't like the look of it.
In the case of the example, the labels needed to be 4 grid columns wide at the lg breakpoint to not break onto a separate line. That, of course, leaves 8 grid columns for each input.
Run the code snippet below, then hit the Full Page option, so you can resize your window and see how the form behaves at the sm/xs, md, and lg breakpoints respectively.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
input {
margin-bottom: 10px;
}
<form class="form-horizontal">
<div class="form-body">
<div class="col-md-4">
<div class="row">
<label for="a1" class="col-lg-4 control-label">Col A Input 1</label>
<div class="col-lg-8">
<input class="form-control" id="a1" placeholder="Col A Input 1" />
</div>
<label for="a2" class="col-lg-4 control-label">Col A Input 2</label>
<div class="col-lg-8">
<input class="form-control" id="a2" placeholder="Col A Input 2" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<label for="b1" class="col-lg-4 control-label">Col B Input 1</label>
<div class="col-lg-8">
<input class="form-control" id="b1" placeholder="Col B Input 1" />
</div>
<label for="b2" class="col-lg-4 control-label">Col B Input 2</label>
<div class="col-lg-8">
<input class="form-control" id="b2" placeholder="Col A Input 2" />
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<label for="c1" class="col-lg-4 control-label">Col C Input 1</label>
<div class="col-lg-8">
<input class="form-control" id="c1" placeholder="Col C Input 1" />
</div>
<label for="c2" class="col-lg-4 control-label">Col C Input 2</label>
<div class="col-lg-8">
<input class="form-control" id="c2" placeholder="Col C Input 2" />
</div>
</div>
</div>
</div>
</form>
EDIT:
Based on your comment, I added margin-bottom: 10px to the input selector in the demo. In practice, I would instead use a class at the form level so I could more specifically target just these inputs not all of my inputs universally, or wrap each separate label + input grouping in a div with a class and apply the margin to the bottom of that class. Also, I would probably place it in a media query so that I could control the amount of margin applied at the different breakpoints.
Thanks to jme11 to getting me on the right track. I think I have figured this out - the following layout is exactly the look and behaviour that I need. Hopefully this will help someone else out in the future.
<form class="form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col A Input 1</label>
<div class="col-md-9">
<div class="form-control-static">Col A Input 1</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col A Input 2</label>
<div class="col-md-9">
<div class="form-control-static">Col A Input 2</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col A Input 3</label>
<div class="col-md-8">
<div class="form-control-static">Col A Input 3</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col B Input 1</label>
<div class="col-md-9">
<div class="form-control-static">Col B Input 1</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col B Input 2</label>
<div class="col-md-9">
<div class="form-control-static">Col B Input 2</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col B Input 3</label>
<div class="col-md-9">
<div class="form-control-static">Col B Input 3</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col C Input 1</label>
<div class="col-md-9">
<div class="form-control-static">Col C Input 1</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col C Input 2</label>
<div class="col-md-9">
<div class="form-control-static">Col C Input 2</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-md-3">Col C Input 3</label>
<div class="col-md-9">
<div class="form-control-static">Col C Input 3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Plunkr example (Make the preview pane larger to see the columns unstacked)
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<!-- another input here -->
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-12">
<!-- another input here -->
</div>
col-md-4 for medium screen scuh as laptop
col-lg-4 for Large screen
col-sm-4 for small screen like tablet
col-xs-12 for xtraa small screen, mobile
You can use this as your wish. I wrote here the code only the forms will display as stack in mobile version.
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>