-1

I have a div which loops dynamically. What I want is every new row should have alternate color i.e first row's div bg will be lets say white and second row's div bg will have grey as the background.

Here's the html 

<div class="container serchcntent"> <!-- bg color change in his div-->
          <div class="row">
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Institute</div>
                      <span class="institute_name">Yak Group</span>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Date</div>
                      <span class="start_date">08/Feb/2017</span>
                      <div class="subheadsp"><span class="duration">2Days</span></div>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12">
                  <div class="serbg">
                      <div class="serhead">Place</div>
                      <span class="venue">Mubai</span>
                  </div>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-12 ss">
                  <div class="serbg">
                      <div class="serhead">Course Fee</div>
                      <span class="fee"></span>
                      <div class="subhead"></div>
                      <a href="" class="book_now" batch-id="">Book Now</a>
                  </div>
              </div>

          </div>
      </div>
Hamza Choudary
  • 25
  • 2
  • 11

2 Answers2

0

Here is the code for you. You will get alternate color for row. 

.col-md-3 {
      background: #fff;
  }
  .col-md-3:nth-child(2n) {
      background: #ccc;
  }
<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>
Simrandeep Singh
  • 569
  • 3
  • 15
  • I guess I didn't explained properly, my query is the entire container loops and its becomes a new row below the first container. Can we give a class to the container and then use css? any idea how to achieve that – Hamza Choudary Mar 24 '17 at 05:30
0

You can do using :nth-child(odd) or :nth-child(even) selector

.serchcntent {
      background: #fff;
  }
.serchcntent:nth-child(odd) {
    background: #ccc;
}
<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>
<div class="container serchcntent"> <!-- bg color change in his div-->
  <div class="row">
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Institute</div>
              <span class="institute_name">Yak Group</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Date</div>
              <span class="start_date">08/Feb/2017</span>
              <div class="subheadsp"><span class="duration">2Days</span></div>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12">
          <div class="serbg">
              <div class="serhead">Place</div>
              <span class="venue">Mubai</span>
          </div>
      </div>
      <div class="col-md-3 col-sm-3 col-xs-12 ss">
          <div class="serbg">
              <div class="serhead">Course Fee</div>
              <span class="fee"></span>
              <div class="subhead"></div>
              <a href="" class="book_now" batch-id="">Book Now</a>
          </div>
      </div>

  </div>
</div>

or

.color {
  background:grey
}
.color:nth-child(even) {
  background:#fff;
}
<div class="color">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

<div class="color">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

or

<div class="color">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
</div>

<div class="">
div without color class

</div>
Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37