bootstrap grid not working as expected

Question

I have created a grid design using bootstrap 3 but divs are not stacking properly

Here is what i am getting

enter image description here

Look at the second row. First and third low are working properly but looks like second row is affected by the content of first row. How to fix this?

Here is my html

    <div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" alt="IMAGE" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>

<div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
<div class="album-art" id="albumArt">
<img src="images/glass.jpg" alt="IMAGE" />
</div>
<div class="song-text">
<div class="song-box-title">Song title</div>
<div class="song-box-channel">Channel Name</div>
<div class="song-box-views">202,432,121</div>
</div>
</div>
</div>

In css i was told to do this-:

.row-fluid [class*="span"]:first-child {
margin-left: 0;

}

Each "row" of the grid needs to be wrapped in a `
`, otherwise the floats are not going to clear (columns are floated). — random_user_name, May 06 '14 at 22:26
Data is getting populated using javascript and this is a sample of 2 divs. I am just stacking each div having that sample data one after another using javascript. — Sam, May 06 '14 at 22:29
Just FYI - the .span*:first-child was a bootstrap 2 wrapping issue, it's not applicable in bootstrap 3 since BS3 uses a different box model. However, since BS3 doesn't use "span" anymore, that shouldn't have any impact on your page. — Kevin Nelson, May 07 '14 at 21:26

score 0 · Accepted Answer · answered May 06 '14 at 22:27

0

You are having float clearing issues. Add this after the 6th column div:

   <div class="clearfix visible-md"></div>

You can add more visible instance if you are having the same problem on other viewports:

   <div class="clearfix visible-sm visible-md"></div>

More info: Responsive column resets: http://getbootstrap.com/css/#grid

answered May 06 '14 at 22:27

moodyjive

1,807
16
17

Yes, this would need a clearfix after the 4th entry for col-sm and after the 6th entry for col-md. It seems that setting the height would be a better way to go unless the height is so unpredictable that it makes this unfeasible...becasue dropping clearfixes all over the place at different places for different resolutions will get messy fast, IMHO – Kevin Nelson May 07 '14 at 22:03

score 0 · Answer 2 · answered May 06 '14 at 22:28

Maybe add div with "row" class.

<div class="row">
  <div class="col-md-2 col-xs-12 col-sm-3 songblock" id="songblock">
  </div>
</div>

Or also try just using the "col-md-#" class and letting rest default.

<div class="row">
  <div class="col-md-2 ongblock" id="songblock">
  </div>
</div>

Kevin Nelson · Answer 3 · 2014-05-07T22:00:18.527

Looking at the code in question, it appears that the issue is that the cols do not have a consistent height. It is wrapping underneath the 6th element to the right of the 5th which is taller than the 6th. If you set the squares to a specific height, then it will work as a proper grid and still allow you to make it responsive so that your rows can have different widths for different resolutions. If you use clearfixes, then your rows are always going to have to end on the same counts.

It seems there might be some confusion on the need for class='row' based on some of the answers. In Bootstrap 2 you did NEED to have NEW rows for each row because of the :first-child having different margins than the rest of the spans. However, Boostrap 3 uses the:

box-sizing:border-box

Which allows it to set the padding for every single col-* the same. Thus, as you can see from the following HTML, there are no column wrapping issues:

<!doctype html>
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css' />
    </head>
    <body>
        <div class='container'>
            <div class='row'>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
                <div class='col-xs-2'><div style='background-color:navy;height:30px;margin-top:6px;'>&nbsp;</div></div>
            </div>
        </div>
    </body>
</html>

So, you do NOT need a row to wrap every group of 6 col-*. If you did, then the responsive features wouldn't work. E.g. you might use col-md-2 col-sm-3 col-xs-6 and the col-xs-6 would require a new row after every 2 entries, the col-sm every 4 entries, and the col-md every 6 entries. Clearly we can't change the HTML for ever screen size...so, when you want dynamic data to wrap in a grid, you do NOT want to use a row for each grouping. Make sense?

However, you DO need a single ROW that has the negative margin-left:-20px; and margin-right:-20px; to offset the container's 20px padding...otherwise you will have wrapping issues where your col-* widths end up 40px bigger than the amount.

Anyway, just wanted to make this clarification for people who happen to wind up on this page and start thinking they have to wrap every group with rows like the old BS2.

Height cannot be set before in my case as its unpredictable. — Sam, May 07 '14 at 23:06
@user3282115, yep, it's a personal preference mostly. I like everything to be the same size when I'm buidling media lists. So, in the same situation, I would probably force a static "largest height allowed", hide overflow, and most likely put a barely-visible border around the boxes to give everything symmetry. — Kevin Nelson, May 08 '14 at 15:48

bootstrap grid not working as expected

3 Answers3

Linked