I am trying to achieve the following layout in Bootstrap 3, converting an old table based layout to Bootstrap's responsive grid:
label1a: value1a label2: value2
label1b: value1b label3: value3
label1c: value1c label4: value4
With 1a through c being related data that needs to be grouped together, in this case address data, e.g.
Address1: [data1] Contact: Joe Bloggs
Town: [data2] Position: Developer
etc.
Problem I have is at smaller viewports I want the address data to remain displayed in a single section rather than interspersed with the other data, i.e.
Address1:
[data1]
Town:
[data2]
Contact:
Joe Bloggs
Position:
Developer
but it is coming out as
Address1:
[data1]
Contact:
Joe Bloggs
Town:
[data2]
Position:
Developer
This is not surprising given the code:
<div class="row">
<label for="Address" class="control-label col-sm-2">Address:</label>
<div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address1")%> <%# DataBinder.Eval(Container.DataItem, "Address2") %></div>
<label for="Contact" class="control-label col-sm-2">Contact:</label>
<div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Name")%></div>
</div>
<div class="row">
<label for="Town" class="control-label col-sm-2">Town:</label>
<div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Address3")%></div>
<label for="Position" class="control-label col-sm-2">Position:</label>
<div class="col-sm-4"><%# DataBinder.Eval(Container.DataItem, "Position")%></div>
</div>
This must be a fairly common scenario so hopefully something simple. I can obviously workaround and change the layout but it would be good to know how best to achieve this in Bootstrap. Thanks.
You can do this by using a row with 2 columns. One column for the address info, the other column for the remaining info.
Then by using bootstrap's built in form layout, you can have the text drop below the label automatically on mobile devices.
Here's an example bootply: http://www.bootply.com/l2lxFK0bCV
<div class="row">
<div class="col-sm-6 form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Address 1</label>
<div class="col-sm-10">
<p class="form-control-static">123 Main St</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Town</label>
<div class="col-sm-10">
<p class="form-control-static">London</p>
</div>
</div>
</div>
<div class="col-sm-6 form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Contact</label>
<div class="col-sm-10">
<p class="form-control-static">Joe Bloggs</p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Position</label>
<div class="col-sm-10">
<p class="form-control-static">Developer</p>
</div>
</div>
</div>
</div>
Related
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 have a form with a ui-select in a bootstrap grid.
I want my ui-select to be as wide as the input below it.
Here is my code
<div class="col-md-12">
<div class="col-md-6 form-group">
<label class="col-md-4" style="text-align:right;">Pays</label>
<div class="col-md-8">
<ui-select ng-model="adresse.pays" theme="select2" ng-disabled="disabled" ame="pays">
<ui-select-match placeholder="Sélectionnez un pays..." allow-clear>{{$select.selected.nom}}</ui-select-match>
<ui-select-choices repeat="pays in payss | propsFilter: {nom : $select.search}">
<div ng-bind-html="pays.nom | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="col-md-6">
<label class="col-md-4" style="text-align:right;">Mail</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.mail">
</div>
</div>
<div class="col-md-12">
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Code adresse client</label>
<input type="text" class="col-md-8 input-sm"
ng-model="adresse.codeAdresseClient" name="codeAdresse">
</div>
<div class="form-group col-md-6">
<label class="col-md-4" style="text-align:right;">Interlocuteur</label>
<input type="text" class="col-md-3 input-sm"
ng-model="adresse.interlocuteur" name="interlocuteur">
</div>
</div>
This code produces this:
If someone knows how to do that...
Thanks in advance.
My suggestion is to either
use bootstrap theme (instead of select2), or
simply set width to 100%
Check this plunk: http://plnkr.co/edit/9mI8nO?p=preview
<ui-select ng-model="person.selected" theme="bootstrap">
...
</ui-select>
<ui-select ng-model="person.selected" theme="select2" style="width:100%">
...
</ui-select>
.ui-select-multiple input.ui-select-search {
width: auto !important;
}
I am integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.
I'm attempting to render, side by side, form elements within a bootstrap modal dialog. Reason for this is that they're for all intents and purposes the same options, just representing options for different items and the current way it renders for users is basically:
<table>
<tr>
<td><!--Option Group 1--></td>
<td><!--Option Group 2--></td>
<td><!--Option Group 3--></td>
</tr>
</table>
So using the modal dialog example in the Bootstrap 3 documentation combined with the form-horizontal exampl in the Bootstrap 3 documentation plus some use of span to attempt to do a 50% width for each (and hopefully left-to-right tiling of the sections), I came out with:
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="addLabel">Title of Dialog</h4>
</div>
<form class="form-horizontal" role="form">
<div class="modal-body">
<div class="row">
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
<div class="span6">
<div class="form-group">
<label for="inputUser" class="col-sm-1 control-label">User</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="inputUser" value="" disabled="disabled">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-1 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Add Request</button>
</div>
</form>
</div>
</div>
http://jsfiddle.net/isherwood/3zeMh/
The problem is that somewhere along the way, it is forcing each item to go new line so I have two "forms" that are 50% of the parent width (intentional) that are rendered vertically (not intentional). How can I make the two render side by side?
<div class="span6">
should be
<div class="col-sm-6">
2 times.
http://jsfiddle.net/isherwood/3zeMh/4
It needs a little further cleanup, but that's the primary issue. Here's one possible refinement: http://jsfiddle.net/isherwood/3zeMh/6
I'd probably make the labels wider and keep everything block for mobile, though.
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>