How do I use Bootstrap columns inside a list item?

Question

Consider the following markup with Boostrap 3:

<ol>
    <li>
        <div class="row">
            <div class="col-xs-6">
                Row 1, col 1
            </div>
            <div class="col-xs-6">
                Row 1, col 2
            </div>
        </div>
    </li>
</ol>

Why does the text not align with the "1." from the <ol>? See http://jsfiddle.net/R2tXU/ as an example...

Also, would it be valid to put the class="row" right on the <li>?

Thanks!

Answer 1

Sorry, I'm a little late responding here... However, using valid markup is important and therefore I think it's worth mentioning alternative solutions...

Option 1

Using a little HTML and CSS, you could set the value on each li ([ Valid HTML5 ]):

[ JS Fiddle Example ]

HTML

<ol>
    <li class="col-xs-6" value="1">Row 1, col 1</li>
    <li class="col-xs-6">Row 1, col 2</li>
    <li class="col-xs-6" value="2">Row 2, col 1</li>
    <li class="col-xs-6">Row 2, col 2</li>
</ol>

CSS

ol li:nth-child(2n+0) {
    list-style: none;
}

Option 2

However, if you're going for a purely CSS approach, this is probably the best option...

[ JSFiddle Example ]

HTML

<ol>
    <li class="col-xs-6">Row 1, col 1</li>
    <li class="col-xs-6">Row 1, col 2</li>
    <li class="col-xs-6">Row 2, col 1</li>
    <li class="col-xs-6">Row 2, col 2</li>
</ol>

CSS

ol {
    counter-reset: index;
}

ol li:nth-child(2n+0) {
    counter-increment: index;
    list-style: none;
}

ol li:nth-child(2n+0):before {
    content: counter(index) ".";
}

ol li:nth-child(2n+0):before {
    content: "";
}

However, do keep in mind [ browser compatibility ].