VinZ VinZ - 6 months ago 17
CSS Question

Bootstrap Responsive Grid layout: can't show rows of 3 div

I'm using Bootstrap 3 responsive grid, and I have an issue with my layout.

Here is the HTML structure I have today:

<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
<div class="col-xs-6 col-sm-4 col-md-3"></div>
</div>


This is working fine for "mobile" (col-xs-6) and "desktop" (cold-md-3) but on "tablet" (col-sm-4), it looks like this (
*
being a div):

* * *
*
* * *
*


Can anyone help ?

Answer

I think you want to utilize Bootstrap's column wrapping feature..

Demo: http://codeply.com/go/TrLJF1qIlC

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
    </div>
</div>

Read more about the Bootstrap grid and column wrapping.

Comments