Bootstrap CSS Different Color on col-md Newline

Question

I have a responsive website, using bootstarp. In one of the pages I have a simple list of divs, like so:

The frontend is using react, if that matters. I am looking to implement a feature where each new line will have a different color.

I don't know how many items there will be, but I know the upper limit should be around 20 (so with col-md-3, it means 5 rows).

But I have seen that for small screens, sometimes bootstrap breaks the row after 3 items, not 4.

Is there a way to achieve different color per row?

user_18235371 · Answer

in first time, you need a class in your div.

After that you can do what you want with for boucle.

document.addEventListener('DOMContentLoaded', function() {

    let div_line = document.getElementsByClassName('myColor');

    for(i = 0; i < div_line.length; i++) {
        if(i <= 4){
            let newLine = div_line[i] ;
            newLine.style.backgroundColor = 'blue';
        }
        if(i >= 4 && i < 8){
            let newLine = div_line[i] ;
            newLine.style.backgroundColor = 'red';
        }
        console.log(div_line.lenght);
        console.log(i)
    }

});

Don't forget repeat the script to continu to 20 lines.

You can delete my console.log, this is for test.

user_17116900 · Answer

Okay, you can use this for different column colors.

style="background-color: #4e3836;"

How can you do this in your code? Here is an example.

Bootstrap CSS Different Color on col-md Newline

2 Answers