Bootstrap: Dyamic columns with container-fluid and row not wrapping properly

Question

Here's what I'm currently seeing:

Notice that the second row isn't wrapping properly. The code looks like:

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-2 bit clearfix">
            <div class="clearfix">
                <div class="image-preview">
                    <a href=""><img src="" class="img-rounded img-responsive"/></a>
                </div>
                <h6><a href="">Some text</a></h6>
            </div>
        </div>
    </div>
    .... repeat ....
</div>

Any idea why the wrapping is incorrect?

Since you're only using one breakpoint for your col classes, the easiest thing to do is to wrap each group of 6 of your .bit divs in a row. Then you can get rid of all of the clearfix classes because the row class automatically clears. If you want to do a more complex grid with multiple col breakpoints, you can see my answer here: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows — jme11, Aug 03 '14 at 02:49

score 7 · Accepted Answer · answered Aug 05 '14 at 04:16

OK, I figured it out. It's more of an RTFM thing with responsive column resets. You basically can use just one <div class="row"> and put all the columns in it (even if they end up appearing on different rows), as long as you put in the proper clear at the right position, e.g., <div class="clearfix visible-xs-block"></div>. So in the below example, I'm displaying two columns on XS viewports, 6 columns on large and medium viewports, and 4 columns on small view ports.

<div class="container-fluid">
<div class="row">
{% for b in bits %}
    <div class="col-xs-6 col-md-2 col-lg-2 col-sm-3 bit">
        <h6><a target="_top" href="{{b.link}}">{{b.description}} </a></h6>
    </div>
    {% if loop.index is divisibleby 2 %}
        <div class="clearfix visible-xs-block"></div>
    {% endif %}
    {% if loop.index is divisibleby 4 %}
        <div class="clearfix visible-sm-block"></div>
    {% endif %}
   {% if loop.index is divisibleby 6 %}
        <div class="clearfix visible-md-block"></div>
        <div class="clearfix visible-lg-block"></div>
    {% endif %}
{% endfor %}
</div>

score 0 · Answer 2 · answered Aug 03 '14 at 01:43

when you say col-md-2, it means it takes 2 column out of 12.. so you will need 6 of those divs inside each of row...and after each row.. you can use clearfix div if you want

   <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>

    <body>
        <div class="container-fluid">

            <div class="col-md-2 bit">
                <div class="image-preview">
                    <a href=""><img class="img-rounded img-responsive" src=""></a>
                </div>
                <h6><a href="">Some text</a></h6>
            </div>



        </div>
    </body>
    </html>

I don't want to add more rows. I want one row at the top
, and then include as many
inside it and I want it to figure out formatting on its own. Possible? — Nightwolf, Aug 03 '14 at 14:15

Bootstrap: Dyamic columns with container-fluid and row not wrapping properly

2 Answers2

Linked