Solution using existing Bootstrap CSS to clear floats on responsive grids #9454

Closed
cfarquharson opened this Issue Aug 14, 2013 · 9 comments

Comments

Projects
None yet
4 participants

Per #8810 and #9402 , the solution is actually already possible with your code.

Just use class="clearfix visible-*" to force clearing of grids

Demo here: http://jsfiddle.net/cfarquharson/JSWar/1/

It might be good to add this to the documentation as this will likely come up over and over as developers realize the height of their content will affect the layout of their responsive grids if they swap grid widths for different resolutions.

Example:

<section class="row">
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
       ...
    </section>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
        ...
    </section>
    <div class="clearfix visible-xs"></div>
    <div class="clearfix visible-sm"></div>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
         ...
    </section>
    <section class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
         ...
    </section>
</section>

mdo closed this in 6e26f84 Aug 15, 2013

Owner

mdo commented Aug 15, 2013

Awesome idea! Just added it.

Btw, I think your markup can be simplified to just be class="col-xs-6 col-md-3" since the columns are just set via min-width and no upper bounds. It just scales up as needed :).

Owner

mdo commented Aug 15, 2013

Let me know if I've missed anything though! And thanks!

@mdo I can't take credit for it... it's @masterbee 's solution (my coworker)

I just reread the new documentation on grids now that there is xs. Great approach...love it!

I noticed that while you added the text to explain responsive column clearing, the rest of the examples on getbootstrap aren't part of your pull. Is that something you want me to tackle?

On a different note, I had posted a follow-up comment to #9215 and didn't hear from you. I just updated the code to match RC2 and was hoping that based on my revised recommendation, that this was something you would consider. Can you read my final comment on that issue and let me know? The jsfiddle http://jsfiddle.net/cfarquharson/Sq9D3/7/ shows why this is a value-added feature which is not possible in Bootstrap 3 as it is right now.

Owner

mdo commented Aug 15, 2013

I noticed that while you added the text to explain responsive column clearing, the rest of the examples on getbootstrap aren't part of your pull. Is that something you want me to tackle?

The examples (examples.getbootstrap.com) will be updated shortly, if that's what you mean. If you're referring to the grids in the CSS page, I'm not sure those need updating—their content doesn't really wrap at all does it?

And I'll chime in on #9215 shortly as well—apologies for the delay.

@mdo I suspect that a lot of people will copy the code here (or at least learn how to code based on it): http://getbootstrap.com/css/#grid-example-mixed and it doesn't have the clearfix div in the demo code. So when they put 'real' content inside of the grid cells, it will almost always be a problem.

Adding the clearfix to your demos is a good practice, even if your filler content isn't impacted. This will hit-it-home for the people who are reading and learning from your documentation or copying and pasting directly from your working examples.

The code should be:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">8</div>
  <div class="col-xs-6 col-md-4">4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">4</div>
  <div class="col-xs-6 col-md-4">4</div>
  <div class="clearfix visible-xs">4</div>
  <div class="col-xs-6 col-md-4">4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6 col-md-6">6</div>
  <div class="col-xs-6 col-md-6">6</div>
</div>

Re my #9215 - thanks!

Owner

cvrebert commented Aug 15, 2013

@cfarquharson Already fixed in git: 6e26f84

Owner

mdo commented Aug 15, 2013

@cvrebert Yeah, we have it in that one spot, but @cfarquharson is referring to the basic grid examples in the #grid-system section. I'll add it @cfarquharson, but with a comment that it's optional.

Owner

mdo commented Aug 15, 2013

Added!

valstu commented Aug 16, 2013

I noticed that if you have a row and inside that row you have eg. 3 x col-sm-4 and after them col-sm-12 the col-sm-12 fills up that whole row with it's height.

I don't like to add empty clearing divs since I know in my case the columns are always same height (I'm making form with columns and the inputs are always the same height). And adding clearing divs is in my opinion sort of styling with html.

If these full width columns would have also float: left; I could add as many columns inside row as I want. I can't use rows either because lets say I want all columns in desktop to be on same level (4 x col-lg-3).

I noticed that you have commented on the grid.less that full-width columns doesn't need float:left since they are already full width. I think there should be float: left; on full-width columns also.

Check out these demos

Demo with column height problem: http://cdpn.io/lEJLe
Same demo but added float: left; to full-width column also: http://cdpn.io/brxfL

cvrebert locked and limited conversation to collaborators Apr 26, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.