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    lt div class  container  gt       lt div class  row  gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-01 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-02 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-03 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-04 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-05 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-06 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-07 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-08 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-09 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-10 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-11 lt  div gt           lt div class  col-md-4 col-sm-6 col-xs-12  gt Emp-12 lt  div gt       lt  div gt   lt  div gt    Any thoughts hints help would be greatly appreciated

User · Accepted Answer

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

User · Answer

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    lt  -- this entire row container is  efefef -- gt   lt div class  row row-striped  gt       lt div class  form-group  gt           lt div class  col-sm-8  gt  lt h5 gt Field Greens with strawberry vinegrette lt  h5 gt  lt  div gt           lt div class  col-sm-4  gt               lt input type  number  type  number  step  1  min  0  gt  lt  input gt  lt small gt  30 salad lt  small gt           lt  div gt       lt  div gt   lt  div gt    lt  -- this entire row container is  ffffff -- gt   lt div class  row row-striped  gt       lt div class  form-group  gt           lt div class  col-sm-8  gt  lt h5 gt Greek Salad lt  h5 gt  lt  div gt           lt div class  col-sm-4  gt               lt input type  number  type  number  step  1  min  0  gt  lt  input gt  lt small gt  25 salad lt  small gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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       lt div class  container  gt       lt 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     gt           lt 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  gt  lt span th text    emplyees i    gt  lt  span gt  lt  div gt       lt  div gt   lt  div gt

[css] Alternating Row Colors in Bootstrap 3 - No Table

Examples related to css

Examples related to twitter-bootstrap-3