Clear rows when running multi-user columns - Bootstrap

Question

This name may not be very accurate, but here is the situation:

As you can see in HTML, the grid goes from 4 images on xl screens to 3 on lg screens to 2 on something smaller.

I am trying to display it correctly - the correct number of images for each screen size. However, something funky is happening and cannot figure it out using bootstraps classes.

It seems to me that I had to dynamically add lines at each breakpoint.

Any suggestions?

- UPDATE - Just realized that col-xl- * does not exist. However, this does not change the situation at all. Please ignore the xl declaration.

- UPDATE 2 - Updated images.

- UPDATE 3 - I will try to clarify my purpose. For this particular image attached to my post, I would like for three lines to appear on each line, not all the sliders.

When it collapses to 2 blocks in a row (xs device), I want to make sure that each row has 2 fields.

Answer 1

I solved this problem by adding clearfix elements where they should be. I wanted 3 columns on md and 2 columns on sm , and here is how I did it:

 <div class="row"> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> <div class="col-sm-6 col-md-4"></div> <div class="clearfix visible-md"></div> <div class="clearfix visible-sm"></div> <div class="col-sm-6 col-md-4"></div> </div> 

So, I used clearfix visible-sm after every second div and clearfix visible-md after every third div. I do not think this solution is ideal, but it works pretty well.

EDIT: Starting with Bootstrap v3.2.0 .visible-* classes are deprecated.

http://getbootstrap.com/css/#responsive-utilities :

The classes .visible-xs, .visible-sm, .visible-md and .visible-lg also exist, but are deprecated since v3.2.0. They are approximately equivalent to .visible - * - block, with the exception of additional special cases for switching elements.

EDIT 2: This solution works as long as you don’t want to edit CSS, if you have the opportunity to do this, I recommend using the Jonas answer , because in my opinion it is much easier.

Answer 2

Extend your bootstrap.css with this css:

 @media (min-width:1200px){ .auto-clear .col-lg-1:nth-child(12n+1){clear:left;} .auto-clear .col-lg-2:nth-child(6n+1){clear:left;} .auto-clear .col-lg-3:nth-child(4n+1){clear:left;} .auto-clear .col-lg-4:nth-child(3n+1){clear:left;} .auto-clear .col-lg-6:nth-child(odd){clear:left;} } @media (min-width:992px) and (max-width:1199px){ .auto-clear .col-md-1:nth-child(12n+1){clear:left;} .auto-clear .col-md-2:nth-child(6n+1){clear:left;} .auto-clear .col-md-3:nth-child(4n+1){clear:left;} .auto-clear .col-md-4:nth-child(3n+1){clear:left;} .auto-clear .col-md-6:nth-child(odd){clear:left;} } @media (min-width:768px) and (max-width:991px){ .auto-clear .col-sm-1:nth-child(12n+1){clear:left;} .auto-clear .col-sm-2:nth-child(6n+1){clear:left;} .auto-clear .col-sm-3:nth-child(4n+1){clear:left;} .auto-clear .col-sm-4:nth-child(3n+1){clear:left;} .auto-clear .col-sm-6:nth-child(odd){clear:left;} } @media (max-width:767px){ .auto-clear .col-xs-1:nth-child(12n+1){clear:left;} .auto-clear .col-xs-2:nth-child(6n+1){clear:left;} .auto-clear .col-xs-3:nth-child(4n+1){clear:left;} .auto-clear .col-xs-4:nth-child(3n+1){clear:left;} .auto-clear .col-xs-6:nth-child(odd){clear:left;} } 

Use it as:

 <div class="row auto-clear"> <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3"> <p>Hey</p> </div> </div> 

Note: this requires the use of all col-size and that all cols are the same size.

Answer 3

Fix .scss using bootstrap variables taken from @jonas and @yog

 @mixin row-first-child($col-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: left; } } } .auto-clear { @media (min-width: $screen-lg-min){ @include row-first-child(lg); } @media (min-width: $screen-md-min) and (max-width: $screen-md-max){ @include row-first-child(md); } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){ @include row-first-child(sm); } @media (max-width: $screen-xs-max){ @include row-first-child(xs); } } 

Answer 4

The reason for breaking your layout is due to the dynamic height of the displayed images. The fix is ​​simple, just limit the height of the images. for example

HTML

 <div class="container"> <div class="row"> <div id="uploaded"> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> <div class="col-xs-6 col-lg-4"> <div class="file-block"> <div class="file-thumbnail"> <img src="http://placehold.it/200x500" alt=""> </div> <div class="file-row-footer"> <a href="javascript:void(0)"> Delete</a> </div> </div> </div> </div> </div> </div> 

CSS

 .file-block { border: 1px solid #ccc; border-radius: 10px; margin: 20px 0px; text-align: center; } .file-thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; height: 180px; font: 0/0 a; /* remove the gap between inline(-block) elements */ } .file-thumbnail:before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } .file-thumbnail img { display: inline-block; margin: 0 auto; max-width: 150px; max-height: 180px; vertical-align: middle; } 

Check out CodePen to see it in action. Hope this helps.

Answer 5

You can fix this very easily with css if you don't need to support IE8.

 .file-row-contain.col-lg-4:nth-child(3n+1), .file-row-contain.col-xs-6:nth-child(2n+1) { clear: left; } 

See examples .

Answer 6

Adding to @Jonas and @KFunk answer:

Potential fix requiring all col-size (col-xs-6 col-sm-4 col-md-4 col-lg-4).

Classes created: auto-clear-xs, auto-clear-sm, auto-clear-md and auto-clear-lg.

I first answered the mobile.

Note It is the same as the columns are the same size.

HTML

 <div class="row auto-clear-xs auto-clear-lg"> <div class="col-xs-6 col-lg-3"> <p>Hey</p> </div> </div> 

SCSS

 @mixin row-first-child($col-type, $clear-type) { .col-#{$col-type}- { &1:nth-child(12n+1), &2:nth-child(6n+1), &3:nth-child(4n+1), &4:nth-child(3n+1), &6:nth-child(odd){ clear: $clear-type; } } } .auto-clear-xs{ @media (min-width: $screen-xs-min){ @include row-first-child(xs, both); } @media (max-width: $screen-xs-min){ @include row-first-child(xs, both); } } .auto-clear-sm{ @media (min-width: $screen-sm){ @include row-first-child(xs, none); @include row-first-child(sm, both); } } .auto-clear-md{ @media (min-width: $screen-md){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, both); } } .auto-clear-lg{ @media (min-width: $screen-lg){ @include row-first-child(xs, none); @include row-first-child(sm, none); @include row-first-child(md, none); @include row-first-child(lg, both); } } 

CSS

 @media (min-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (max-width: 480px) { .auto-clear-xs .col-xs-1:nth-child(12n+1), .auto-clear-xs .col-xs-2:nth-child(6n+1), .auto-clear-xs .col-xs-3:nth-child(4n+1), .auto-clear-xs .col-xs-4:nth-child(3n+1), .auto-clear-xs .col-xs-6:nth-child(odd) { clear: both; } } @media (min-width: 768px) { .auto-clear-sm .col-xs-1:nth-child(12n+1), .auto-clear-sm .col-xs-2:nth-child(6n+1), .auto-clear-sm .col-xs-3:nth-child(4n+1), .auto-clear-sm .col-xs-4:nth-child(3n+1), .auto-clear-sm .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-sm .col-sm-1:nth-child(12n+1), .auto-clear-sm .col-sm-2:nth-child(6n+1), .auto-clear-sm .col-sm-3:nth-child(4n+1), .auto-clear-sm .col-sm-4:nth-child(3n+1), .auto-clear-sm .col-sm-6:nth-child(odd) { clear: both; } } @media (min-width: 992px) { .auto-clear-md .col-xs-1:nth-child(12n+1), .auto-clear-md .col-xs-2:nth-child(6n+1), .auto-clear-md .col-xs-3:nth-child(4n+1), .auto-clear-md .col-xs-4:nth-child(3n+1), .auto-clear-md .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-md .col-sm-1:nth-child(12n+1), .auto-clear-md .col-sm-2:nth-child(6n+1), .auto-clear-md .col-sm-3:nth-child(4n+1), .auto-clear-md .col-sm-4:nth-child(3n+1), .auto-clear-md .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-md .col-md-1:nth-child(12n+1), .auto-clear-md .col-md-2:nth-child(6n+1), .auto-clear-md .col-md-3:nth-child(4n+1), .auto-clear-md .col-md-4:nth-child(3n+1), .auto-clear-md .col-md-6:nth-child(odd) { clear: both; } } @media (min-width: 1200px) { .auto-clear-lg .col-xs-1:nth-child(12n+1), .auto-clear-lg .col-xs-2:nth-child(6n+1), .auto-clear-lg .col-xs-3:nth-child(4n+1), .auto-clear-lg .col-xs-4:nth-child(3n+1), .auto-clear-lg .col-xs-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-sm-1:nth-child(12n+1), .auto-clear-lg .col-sm-2:nth-child(6n+1), .auto-clear-lg .col-sm-3:nth-child(4n+1), .auto-clear-lg .col-sm-4:nth-child(3n+1), .auto-clear-lg .col-sm-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-md-1:nth-child(12n+1), .auto-clear-lg .col-md-2:nth-child(6n+1), .auto-clear-lg .col-md-3:nth-child(4n+1), .auto-clear-lg .col-md-4:nth-child(3n+1), .auto-clear-lg .col-md-6:nth-child(odd) { clear: none; } .auto-clear-lg .col-lg-1:nth-child(12n+1), .auto-clear-lg .col-lg-2:nth-child(6n+1), .auto-clear-lg .col-lg-3:nth-child(4n+1), .auto-clear-lg .col-lg-4:nth-child(3n+1), .auto-clear-lg .col-lg-6:nth-child(odd) { clear: both; } } 

Answer 7

This is how it should be. The Bootstrap grid consists of 12 columns, you say that the size of one lg element is 4/12, which is the third, and the xs element is 6/12, which is half the available width.

If you check the applicable style, you will see that col-xs-6 is the same as setting the width of one element to 50% and 33.33% for col-lg-4.

You can learn more about the mesh system here.

EDIT: I think I understand your problem now without seeing the code, I probably cannot give you an exact solution. However, the problem is the variable height of your fields, if you have all of them at the same height, it should give you the right number of boxes per row.

Answer 8

It seems that the only solution to your problem is to set a minimum height or a fixed height for your elements so that there are no inconsistencies that cause the problems.

add this:

 .file-row-contain { min-height:250px; } 

... set the height according to your needs

Answer 9

I was looking for a solution, and since my HTML code is being transmitted via CMS, I could not use the solution to the accepted answer.

So my solution is:

 .teaser { // break into new line after last element > div:last-child { clear: right; } } .teaser { // two colums @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { > div:nth-child(2n+1) { clear: left; } } } .teaser { // three colums @media (min-width: @screen-md-min) { > div:nth-child(3n+1) { clear: left; } } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row teaser"> <div class="col-sm-6 col-md-4">div1</div> <div class="col-sm-6 col-md-4">div2<br>more content</div> <div class="col-sm-6 col-md-4">div3</div> <div class="col-sm-6 col-md-4">div4</div> <div class="col-sm-6 col-md-4">div5<br>more content content<br>content</div> <div class="col-sm-6 col-md-4">div6</div> <div class="col-sm-6 col-md-4">div7<br>more content</div> <div class="col-sm-6 col-md-4">div8</div> </div> 

Hope this helps someone :-)

Answer 10

Bootstrap 4 introduces the hidden-*-up and hidden-*-down classes. A very convenient (and elegant) utility for such situations.

Available classes

• The .hidden-*-up classes hide an element when the viewport is at a given breakpoint or wider. For example, .hidden-md-up hides an item in medium, large, and extra-large viewports.
• The .hidden-*-down classes hide an element when the viewport is at a specified breakpoint or less. For example, .hidden-md-down hides an element in too small, small, and medium viewports.
• There are no explicit "visible" / "show" utility classes responsive; you make the element visible by simply not hiding it at that breakpoint size.
• You can combine one class .hidden-*-up with one class .hidden-*-down to show an element only at a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up shows an element only in medium and large viewports. Using multiple .hidden-*-up classes or multiple .hidden-*-down classes are redundant and pointless.
• These classes do not try to accommodate less common cases when the visibility of elements cannot be expressed as a single continuous range of sizes of viewpoints of the viewport; you will instead need to use custom CSS in such cases.

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/