Bootstrap: Striped div table

css, html, twitter-bootstrap

Solution

Twitter Bootstrap's striping only works for table rows. So in order to stripe your divs you need to add each of them into a new row. For instance:

    <tr>
        <td>
            <div>text 1</div> 
        </td>
    </tr>
    <tr>
        <td>
            <div>text 2</div>  
        </td>
    </tr>
    ...

Also I'm not sure what you trying to achieve with `colspan="3"`. If you want to create a proper table you need to create new `td` for each column. For instance:

    <tr>
        <td>2013-07-22</td>
        <td>Text for info field 1</td>
        <td>9.99</td>
    </tr>

Problem

I'm using Bootstrap css lib. I know how to make striped table with this lib but how to make striped div's? For ex, in tables you would do this: ``` <table id="newtable" class="table table-bordered table-striped fixedtable"> <thead> <th>Date</th> <th>Info</th> <th>Price</th> </thead> <tbody> <tr> <td colspan="3"> <div>text 1</div> <div>text 2</div> <div>text 3</div> <div>text 4</div> </td> </tr> </tbody> </table> ``` And I need to repeat that "styling" with divs like this: ``` <div class="row"><div class="col">Text 1 White BG</div></div> <div class="row"><div class="col">Text 2 Grey BG</div></div> <div class="row"><div class="col">Text 3 White BG</div></div> <div class="row"><div class="col">Text 4 Grey BG</div></div> ``` Question is: How to make: `<div>text 1</div>, <div>text 2</div>, <div>text 3</div>, <div>text 4</div>` striped?

Original source