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.
This question is related to
css
twitter-bootstrap-3
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.
I was having trouble coloring rows in table using bootstrap table-striped class then realized delete table-striped class and do this in css file
tr:nth-of-type(odd)
{
background-color: red;
}
tr:nth-of-type(even)
{
background-color: blue;
}
The bootstrap table-striped class will over ride your selectors.
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;
}
The thread's a little old. But from the title I thought it had promise for my needs. Unfortunately, my structure didn't lend itself easily to the nth-of-type solution. Here's a Thymeleaf solution.
.back-red {
background-color:red;
}
.back-green {
background-color:green;
}
<div class="container">
<div class="row" th:with="employees=${{'emp-01', 'emp-02', 'emp-03', 'emp-04', 'emp-05', 'emp-06', 'emp-07', 'emp-08', 'emp-09', 'emp-10', 'emp-11', 'emp-12'}}">
<div class="col-md-4 col-sm-6 col-xs-12" th:each="i:${#numbers.sequence(0, #lists.size(employees))}" th:classappend'(${i} % 2) == 0?back-red:back-green"><span th:text="${emplyees[i]}"></span></div>
</div>
</div>
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>
Source: Stackoverflow.com