How to make an ordered List with Twitter Bootstrap Component?

Question

I have a simple ordered list, super easy:

http://www.bootply.com/P8wglPiSVD

Looks like this:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ol class="list-group">
                <li class="list-group-item">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, aliquid.</p>
                </li>
                <li class="list-group-item">
                    <p>Quos nostrum provident ex quisquam aliquid, hic odio repellendus atque.</p>
                </li>
                <li class="list-group-item">
                    <p>Facilis, id dolorum distinctio, harum accusantium atque explicabo quidem consectetur.</p>
                </li>
            </ol>
        </div>
    </div>
</div>

But twitter bootstrap isn't showing any numbers, even though it is an ordered list.

I searched but didn't find any twitter bootstrap compontent that styles ordered list items and this makes me curious. Is there a lacking in a predefined style for Twitter Bootstrap for ordered lists or am I missing something?

Kind regards,

George

Answer 1

Combining @Steve Sanders and @beiping_troop answers, you can create clean ordered list-groups with the following CSS:

.list-group {
    list-style: decimal inside;
}

.list-group-item {
    display: list-item;
}

http://www.bootply.com/BJadu6Ja6R

Answer 2

Bootstrap is applying display: block to the list items, which kills the numbering. Add this to your CSS:

.list-group-item {
    display: list-item;
}

http://www.bootply.com/ZHQBWK9sHB

Answer 3

For just a clean ordered list, I chose an inline style override since I was only calling out a numbered list in one place. It rendered just fine:

<ol style="list-style: decimal inside;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

My reference was originally here: Bootstrap: numbers from ordered list disapear when using media object

Answer 4

I found a better solution is to add a new css class to the list group depending on the style of numbering you want for example "list-group-numbered" or "list-group-alpha" that way you can add the numbering to only the ordered lists you want to add it to and not to all numbered lists, especially if you have somewhere else on the website that has numbered lists that now looks wrong...

.list-group-numbered { list-style: decimal inside; }
.list-group-alpha { list-style: lower-alpha inside; }
.list-group-roman { list-style: lower-roman inside; }
.list-group-alpha >li, .list-group-numbered >li { display: list-item }

then you can put in the following in html..

<ol class="list-group list-group-numbered">
    <li class="list-group-item">an item
        <ol class="list-group list-group-alpha">
            <li class="list-group-item">a sub item
                <ol class="list-group list-group-roman">
                    <li class="list-group-item">a sub-sub item</li>
                </ol>                
            </li>
        </ol>
    </li>
    <li class="list-group-item">another item</li>        
    <li class="list-group-item">a third item</li>
</ol>