Bootstrap 5. list-group-numbered - I can't change to list-style-type: lower-roman

Question

I'm trying to follow the documentation here:

https://getbootstrap.com/docs/5.0/components/list-group/

"Numbers are generated by counter-reset on the , and then styled and placed with a ::before pseudo-element on the

with counter-increment and content."

<ol class="list-group list-group-numbered contract">
    <li class="list-group-item border-0 contract">
    copy
    </li>
    <li class="list-group-item border-0 contract">
    more copy 
    </li>
</ol>

I've only just moved to BS 5.0, so that could be my confusion.

CSS works to change the font-size/color but not the style.

li.contract::before {
    font-size: 2.25rem !important;
    color: #AED6DE !important;
    list-style-type: lower-roman !important;
}

I can't find any examples of numbered Lists in BS 5.0, just the brief explanation in the BS docs.

Any examples/guidance would be much appreciated.

Answer 1

Add the property content: counter(section, lower-roman) ". "; to your li.contract::before class or to the li.list-group-item::before class like so:

li.list-group-item::before {
    font-size: 2.25rem;
    color: #AED6DE;
    content: counter(section, lower-roman) ". ";
}

Instead of using the list-style-type: property.

Explanation: This is because they mention in the Bootstrap 5.0 documentation (you were on the right track but it is a bit obscure) in the Numbered Section, that "Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before pseudo-element on the <li> with counter-increment and content." So the counter needs to be styled/specified within the <li> css instead of specifying the list-style-type: property directly on <ol> or <li>. The counter css works by initializing it with a name and setting it to zero on the <ol> (parent element) using the counter-reset: section property, adding the counter to the <li> with the content: property, and then styling it with the same idea you were using to get the color and size to work (within/selecting the <li>, and in this case the counter name is section - which I found with an inspect).