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>
Related
I am looking to implement the following table where the name column uses two rows while age and location uses one. The text would be centered in their own row:
Is this bootstrap compliant? If so, how would you implement such a table?
Thanks.
Yep, you can nest rows and columns in bootstrap. The markup would look something like this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Name</h1>
<div class="row">
<div class="col-sm-6">
<p>John Smith</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Contractor</p>
</div>
</div>
</div>
<div class="col-sm-4">
<h1>Age</h1>
</div>
<div class="col-sm-4">
<h1>Location</h1>
</div>
</div>
</div>
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
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 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>