Bootstrap CSS Styling Issue - html

Question

I am having an issue with a dynamic form I am creating on my page.
I have a Row that contains 1 or more Divs that are 4 col in length. I would expect that after ever 3, it moves the next one down as it hits the 12 col limit.
Looking at the picture below, after we hit the first three fields I would think it would move the others down to their own row.
Here id the HMLT that my data is in. As you can see, each one is its own col within the row.
Is there something I am doing incorrectly with the way I have this formatted? Just not sure what else to try.

Answer 1

I believe it is proper to create a .row for every row on the page:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>

Answer 2

I had the same problem yesterday, what I found is that the container should have the col length specified in order to fix the problem.
Also I found useful to add additional divs in order to fix better the length of the fields.
My example:
<div class="form-group col-md-12">
<div class="row">
<div class="form-group col-md-3">
your label data
</div>
<div class="form-group col-md-4">
your input data
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
your label data
</div>
<div class="form-group col-md-3">
your input data
</div>
</div>
</div>
I hope it helps.

Answer 3

It's hard to tell from your screenshot, but it looks like you have the whole thing (rows, columns, and some form groups) inside of a span element. Try using a div instead.

Answer 4

The problem: http://jsfiddle.net/24doudo0/
This seems to be an issue with how bootstrap handles grid wrapping. It doesn't handle as nicely as we would like. I can think of two solutions to this problem. The first is to insert rows after every third column when you loop over them in the backend. For that you can use the modulus operator. I don't know what backend language you are using, but I'll illustrate this approach using PHP because I'm lazy.
Lets assume you have an array of input names that you want to loop over and create columns for each.
<div class="row">
<? foreach ($inputs as $count => $name) : ?>
<div class="col-md-4">
<input type="text" name="<?=$name?>">
</div>
<? if (($count + 1) % 3 == 0) : // $count is 0 based. We need an index that starts at 1 so that we don't trigger a new row on the first loop (0 / 3 = 0 which is a remainder of 0) ?>
</div>
<div class="row">
<? endif; ?>
<? endforeach; ?>
</div>
The other solutions is a CSS based one. Pretty simple but is CSS3 only, so it won't work in IE 8 or less. This approach just clears the float after every third column. Demo here: http://jsfiddle.net/j0dtng4t/
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
[class*="col-"]:nth-of-type(3n + 1) {
clear:left;
}

Answer 5

Actually there are at least other 2 alternative solutions you can consider without adding row divs.
The first is adding heights to all the .col* elements , in this way they'll get ordered progressively and stack when they don't fit next to each other.(checkout the pen).
The second is using display flex on the div containing the .col* elements; it's not a bootstrap feature but it seems to suite your situation quite well.
In the pens I made I modified the col-* selectors but I suggest you use a new selector so not to mess with Bootstrap's grid style.

Answer 6

There seems to be some confusion on how floats work especially in a bootstrap grid.
Here is a simple bit of code that demonstrates how floats work
.container-fluid {min-width:638px;}
.container-fluid p{margin:0;font-size:1.2rem}
[class*="col-"] {
background: #C55;
border: 1px solid white;
color: white;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
column 1 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 2 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 3 <p>we work because we are the same height</p>
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-4">
column 2 <p>I'm tall, but my buddies aren't</p>
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 3
</div>
<div class="col-xs-4">
column 1
</div>
<div class="col-xs-6">
column 2 <p>I'm tall but because Fred is too wide he goes to the far left to fit</p>
</div>
<div class="col-xs-2">
column 3
</div>
<div class="col-xs-4">
Fred column 1
</div>
</div>
<div class="row">
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
inputs are taller than select
</div>
<div class="col-xs-4">
selects are smaller
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<input type="text" placeholder="i'm too tall" />
</div>
<div class="col-xs-4">
<select><option>i'm shorter</option></select>
</div>
<div class="col-xs-4">that's why i'm column 3</div>
</div>
</div>