CODEWITHSUNDEEP
twitter-bootstrapcsscss-selectors
aurore
aurore

Reputation: 3

Alternate dynamic background bootstrap

I have a problem with bootstrap.

On large screen I have a grid with 2 colums (so col-lg-6) and I want an alternate background on my blocs, like this :

(bg white) (bg red)

(bg red) (bg white)

(bg white) (bg red)

...

I used nth-child(even) and nth-child(odd) but with this solution my first column is white, and the second red (but good for the col-xs-12).

Do you guys know how to "alternate" even and odd ?

Thank you so much !

Upvotes: 0

Views: 999

Answers (1)

slashsharp
slashsharp

Reputation: 2833

You can if you wrap your bootstrap grid column with a wrapper.

.col-lg-6 {
    width: 50%;
    float: left;
}
.row:nth-child(even) div:nth-child(even) {
    background-color: blue;
}
.row:nth-child(even) div:nth-child(odd) {
    background-color: red;
}
.row:nth-child(odd) div:nth-child(even) {
    background-color: red;
}
.row:nth-child(odd) div:nth-child(odd) {
    background-color: blue;
}
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>
<div class="row">
	<div class="col-lg-6">First</div>
	<div class="col-lg-6">Second</div>
</div>

Upvotes: 1

Related Questions