CODEWITHSUNDEEP
csstwitter-bootstrapcss-selectors
zrosen
zrosen

Reputation: 21

:nth-child within Bootstrap rows

Currently, I have a page that loads a PHP array and creates rows, within Bootstrap. The PHP is generating a random number for the column count (col-sm-4, col-sm-3, etc. is created randomly, until it adds up to 12).

Example of one row within the Bootstrap container:

    <div class="row equal project-row">
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-3 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-4 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
        <article class="col-sm-1 project">
            <header class="project-title">title</header>
            <p class="project-desc">text</p>
        </article>
    </div>

I then have some CSS which is setting the background color of each <article>, iterating through 5 different choices. It is based on the project class.

CSS:

.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

However, the iterated colors only change within each row; for example, in the example row in the above code, it would show the first four colors (5n+1, 5n+2, 5n+3, and 5n+4), but then if there were a SECOND row, it would start back at 5n+1 INSTEAD of going to 5n+5.

I realize this is caused by the rows - before adding those in, this worked fine. But I'm a bit lost on the best method to use, within my current framework, so that the project classes are iterated through completely.

Here's a jsfiddle example, with two rows to show that it does not iterate through all 5 color options (5th is a reddish color).

Thanks for any and all help!

Upvotes: 2

Views: 8880

Answers (1)

Judson Terrell
Judson Terrell

Reputation: 4306

If you are using a server language to output the rows, you could use a MOD function then have if statements to add a class for row color depending on the MOD output.

Another option is to use jquery to do the same type thing. Iterate through each row, at index 1 addClass('bgcolor-blue'), if 2 addClass('bgcolor-ltblue').....and so on.

This would be a clear example on the best approach.

<style>
.project:nth-child(5n+1) {
    background: rgba(32,78,127,1);
}
.project:nth-child(5n+2) {
    background: rgba(6,133,135,1);
}
.project:nth-child(5n+3) {
    background: rgba(79,185,159,1);
}
.project:nth-child(5n+4) {
    background: rgba(109,242,87,1);
}
.project:nth-child(5n+5) {
    background: rgba(214,77,53,1);
}

</style>


<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<div class='row equal project-row'>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-3 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-4 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
    <article class="col-sm-1 project">
        <header class="project-title">title</header>
        <p class="project-desc">text</p>
    </article>
</div>

<script>
$(document).ready(function(){

    $('article').unwrap();  
    $('article').wrapAll('<div class="row equal project-row">')      

});
</script>

http://jsfiddle.net/judsonmusic/5uqZM/5/

I hope this helps...

Upvotes: 1

Related Questions