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!

I'm stumped! I put the row on an li inside a ul and I didn't see any problems in my code, but with the ol the numbers sure do get all messed up. — Jacob Raccuia
– Jacob Raccuia, Commented Jul 24, 2014 at 21:06

user1960364 · Accepted Answer · 2014-12-04 13:06:36Z

8

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 ].

edited Dec 4, 2014 at 13:06

answered Dec 4, 2014 at 12:34

user1960364

2,0196 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maelish Over a year ago

Any thoughts on how to make this work with portlets? The background color doesn't fill to the bottom of the portlet when using this method. Edit: Never mind, just wrap it in a DIV with row class.

kiranvj · Accepted Answer · 2018-01-15 10:48:48Z

3

This is how I fixed it. No other additional styles, only Bootstrap classes.

You just need to add these class to row div d-inline-flex w-100

 <ol>
    <li>
        <div class="row d-inline-flex w-100 ml-2">
            <div class="col-xs-6">
                Row 1, col 1
            </div>
            <div class="col-xs-6">
                Row 1, col 2
            </div>
        </div>
    </li>
    <li>
        <div class="row d-inline-flex w-100 ml-2">
            <div class="col-xs-6">
                Row 2, col 1
            </div>
            <div class="col-xs-6">
                Row 2, col 2
            </div>
        </div>
    </li>
</ol>

Fiddle here

edited Jan 15, 2018 at 10:48

answered Jan 15, 2018 at 10:42

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Collectives™ on Stack Overflow

How do I use Bootstrap columns inside a list item?

2 Answers 2

Option 1

Option 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1

Option 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related