responsive zebra-striping

the wonders of nth-child at work

by jack gold

HTML

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-01</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-02</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-03</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-04</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-05</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-06</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-07</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-08</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-09</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-10</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-11</div>
        <div class="col-md-4 col-sm-6 col-xs-12">Emp-12</div>
    </div>
</div>

CSS

/* base styles, just for demo purposes 
* i'm sure bootstrap does tidier math on the percentages, etc
* but this is just a demo of the :nth-of-type solutions needed
* to create striped rows in all three situations.
*/
 div {
    padding:2px;
    background: rgba(100, 100, 100, 0.2);
    margin-bottom:10px;
}
.row {
    overflow:hidden;
}
.row div {
    float:left;
}
/* smallest viewport */
 @media (min-width:200px) and (max-width:399px) {
    .col-xs-12 {
        width:100%;
    }
    .row div {
        background: rgba(100, 100, 100, 0.2);
    }
    .row div:nth-of-type(2n) {
        background: #fff;
    }
}
/* medium viewport */
 @media (min-width:400px) and (max-width:599px) {
    .col-sm-6 {
        width: 48%;
    }
    .row div {
        background: rgba(100, 100, 100, 0.2);
    }
    .row div:nth-of-type(4n+1), .row div:nth-of-type(4n+2) {
        background: #fff;
    }
}
/* largest viewport */
 @media (min-width:600px) and (max-width:9999px) {
    .col-md-4 {
        width: 30%;
    }
    .row div {
        background: rgba(100, 100, 100, 0.2);
    }
    .row div:nth-of-type(6n+4), .row div:nth-of-type(6n+5), .row div:nth-of-type(6n+6) {
        background: #fff;
    }
}