Alternating Row Colors in Bootstrap 3 - No Table

Question

I am looking for a way to do alternating row colors in a responsive layout in Bootstrap 3. I cannot figure out how to do it without a LOT of extensive, confusing CSS and was hoping that someone had a better solution.

Here is the simple premise: 12 divs that display as 4 rows of 3 on large screens, 6 rows of 2 on small screens, and 12 rows of 1 on mobile. The rows will need to have alternating background colors regardless of screen size.

The HTML for Bootstrap 3 is as follows:

<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> 

Any thoughts/hints/help would be greatly appreciated.

Answer 1

Since you are using bootstrap and you want alternating row colors for every screen sizes you need to write separate style rules for all the screen sizes.

/* For small screen */ .row :nth-child(even){   background-color: #dcdcdc; } .row :nth-child(odd){   background-color: #aaaaaa; }  /* For medium screen */     @media (min-width: 768px) {     .row :nth-child(4n), .row :nth-child(4n-1) {         background: #dcdcdc;     }     .row :nth-child(4n-2), .row :nth-child(4n-3) {         background: #aaaaaa;     } }  /* For large screen */ @media (min-width: 992px) {     .row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {         background: #dcdcdc;     }     .row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {         background: #aaaaaa;     } } 

Working FIDDLE
I have also included the bootstrap CSS here.