Bootstrap divs wrapping not clearing previous line

Question

Okay. This has been frustrating me and I cannot find the answer anywhere (and I have been looking).

<div class="container">

    <div class="row">

        <div class="col-xs-12 col-sm-4">Content block 1</div>

        <div class="col-xs-12 col-sm-4">Content block 2  Content block 2  Content block 2  Content block 2 Content block 2</div>

        <div class="col-xs-12 col-sm-4">Content block 3</div>

        <div class="col-xs-12 col-sm-4">Content block 4 </div>

    </div>

</div>

If you run the code, Content Block 4 should start on a new line clearing content 1, content 2 and content 3. Instead, it sits under content 3.

What I am looking for is some way to get the divs to clear all of the boxes on the left as soon as it gets to the end. I know I could put a clear both after the third div and I know that works. The issue is that bootstrap supports 4 different layouts so it has to be able to respond to all sizes xs, sm, md and lg. Sure I could write a php script to calculate and write targetted clear divs for each of the four but there has to be an easier way. It could be a simple CSS inclusion and I have looking and looking and looking.

Any ideas would really be appreciated.

Wrap those div's inside row and try – stanze May 25 '15 at 04:56 — stanze, May 25 '15 at 04:56

score 2 · Answer 1 · answered May 25 '15 at 04:57

2

You could use nth-child(n) CSS selector to fix this issue. Read up on this article for more information.

It's something like this. Click 'Run snippet' and select 'Full Page'

.col-sm-4:nth-child(3n+1) {
  clear: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 1</div>

    <div class="col-xs-12 col-sm-4">Content block 2 Content block 2 Content block 2 Content block 2 Content block 2</div>

    <div class="col-xs-12 col-sm-4">Content block 3</div>

    <div class="col-xs-12 col-sm-4">Content block 4</div>

  </div>

</div>

answered May 25 '15 at 04:57

khakiout

2,372
25
32

I have looked into this and it looks good. What I am looking is say in Bootstrap you had 4 blocks on a row and then on small you went to two or three. Are you saying that you would have to use media queries and then add custom nth-child for each? I can see it working but was wanting to see if there was something that would just wrap and clear if it hit the end. I guess the good thing with Stack Overflow is that with the briainy people on here, if enough say it cannot be done, it will save me a heap of time looking if you know what I mean. Does that make sense? – Murray Chapman May 27 '15 at 02:47
If you and others believe that the easiest way is to use Media queries and nth-child, then that is the way I will approach this situation. Whatcha think and thanks for sharing your insight. – Murray Chapman May 27 '15 at 02:50
@MurrayChapman Yes, it would just be around 20-30 more lines of codes in your CSS file. Other people here is using `nth-child` as a solution. See http://stackoverflow.com/a/22287333/3176651 or http://stackoverflow.com/a/19919042/3176651. – khakiout May 27 '15 at 05:18
1

Thanks. Yes I guess that it will be a good way to approach it. I was hoping for something that was automated so I did not have to add media queries but thanks for the help. – Murray Chapman May 29 '15 at 03:58

score 1 · Accepted Answer · answered May 25 '15 at 07:53

The problem is that you are having 4 * col-sm-4 inside one row. Bootstrap is using a 12-col grid and you are trying to fit 16 cols inside a row. As the content of "content block 2" is larger (higher) than the the content of the rest of the blocks this div will not be cleared by the float and your "content block 4" will be stuck beneath "content block 3".

Solution 1: Split your columns up in to two rows:

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 1</div>
    <div class="col-xs-12 col-sm-4">Content block 2 Content block 2 Content block 2 Content block 2 Content block 2</div>
    <div class="col-xs-12 col-sm-4">Content block 3</div>

  </div>
  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 4</div>

  </div>
</div>

Solution 2: Use a combination of a .clearfix and Bootstraps responsive utility classes.

Bootstrap documentation

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-4">Content block 1</div>
    <div class="col-xs-12 col-sm-4">Content block 2 Content block 2 Content block 2 Content block 2 Content block 2</div>
    <div class="col-xs-12 col-sm-4">Content block 3</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-sm-block"></div>

    <div class="col-xs-12 col-sm-4">Content block 4</div>
  </div>
</div>

Thanks for the response. I know that it will force a new line and I did that on purpose to show a possible issue I wanted to see if it could be fixed. What I am looking for is an intelligent way to say to a div, 'Hey, if you have to go to a new line, make sure you clear what is above.' Does that make sense? I have been looking and looking. I was hoping there was some css command I overlooked or misinterpreted what it did. — Murray Chapman, May 27 '15 at 02:42
Yes, well in that case I'm sorry to say that there are no good solution because the Bootstrap grid uses floats and they behave in this way. Either you need to clear your floats or consider using a flexbox layout instead. [Flexbox vs Twitter bootstrap](http://stackoverflow.com/a/27599647/1182348), [More on flexbox](http://philipwalton.github.io/solved-by-flexbox/demos/grids/). Be aware of browser compatibility though. — mangeohlin, May 27 '15 at 07:41
Actually Mangeohlin, I was looking for confirmation that it could not be done so you answered my question perfectly. Thanks for saving me further headaches. Much appreciated. — Murray Chapman, May 28 '15 at 15:43

score 0 · Answer 3 · answered May 25 '15 at 05:06

Only into the div use the right elements in block with the same size

<div class="row">

    <div class="col-xs-12 col-sm-4"><p>Content block 1</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 2</p><p>Content block 2</p><p>Content block 2</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 3</p><p>Content block 3</p><p>Content block 3</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 4</p><p>Content block 4</p><p>Content block 4</p></div>


    <div class="col-xs-12 col-sm-4"><p>Content block 5</p></div>

    <div class="col-xs-12 col-sm-4"><p>Content block 6</p></div>

</div>

Same size always works. Issue is that if this was for a gallery or shop which had items in rows. It would be good if they could be variable height and clear what is above if they have to wrap. I am sure there has to be an easy way to do it. GRRR. — Murray Chapman, May 27 '15 at 02:45

Bootstrap divs wrapping not clearing previous line

3 Answers3