Alternating Row Colors in Bootstrap 3 - No Table
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.
There isn't really a way to do this without the css getting a little convoluted, but here's the cleanest solution I could put together (the breakpoints in this are just for example purposes, change them to whatever breakpoints you're actually using.) The key is :nth-of-type
(or :nth-child
-- either would work in this case.)
Smallest viewport:
@media (max-width:$smallest-breakpoint) {
.row div {
background: #eee;
}
.row div:nth-of-type(2n) {
background: #fff;
}
}
Medium viewport:
@media (min-width:$smallest-breakpoint) and (max-width:$mid-breakpoint) {
.row div {
background: #eee;
}
.row div:nth-of-type(4n+1), .row div:nth-of-type(4n+2) {
background: #fff;
}
}
Largest viewport:
@media (min-width:$mid-breakpoint) and (max-width:9999px) {
.row div {
background: #eee;
}
.row div:nth-of-type(6n+4),
.row div:nth-of-type(6n+5),
.row div:nth-of-type(6n+6) {
background: #fff;
}
}
Working fiddle here
You can use this code :
.row :nth-child(odd){
background-color:red;
}
.row :nth-child(even){
background-color:green;
}
Demo : http://codepen.io/mouhammed/pen/rblsC
I find that if I specify .row:nth-of-type(..)
, my other row's elements (for other formatting, etc) also get alternating colours. So rather, I'd define in my css an entirely new class:
.row-striped:nth-of-type(odd){
background-color: #efefef;
}
.row-striped:nth-of-type(even){
background-color: #ffffff;
}
So now, the alternating row colours will only apply to the row container, when I specify its class as .row-striped
, and not the elements inside the row
.
<!-- this entire row container is #efefef -->
<div class="row row-striped">
<div class="form-group">
<div class="col-sm-8"><h5>Field Greens with strawberry vinegrette</h5></div>
<div class="col-sm-4">
<input type="number" type="number" step="1" min="0"></input><small>$30/salad</small>
</div>
</div>
</div>
<!-- this entire row container is #ffffff -->
<div class="row row-striped">
<div class="form-group">
<div class="col-sm-8"><h5>Greek Salad</h5></div>
<div class="col-sm-4">
<input type="number" type="number" step="1" min="0"></input><small>$25/salad</small>
</div>
</div>
</div>