Badge doesn't move right Boostrap 4-CodePudding

my home work is design a table of content using BOOTSTRAP4, study and use https://getbootstrap.com/docs/4.6/components/list-group/ but the Badge doesnt move right like it said, its only stick with the content

<ul >
            <h2 >
             INTRO
            </h2>
            <br>
            <li >
                content
                <span >1</span>
            </li>
            <li >
                   content
                <span >3</span>
            </li>
            <li >
                  content
                <span >4</span>
            </li>
            <li >
                   content
                <span >9</span>
            </li>
            <li >
                   content
                <span >9</span>
            </li>
        </ul>

CodePudding user response：

As mentioned on the official documentation, add d-flex justify-content-between to the <li> element. Here is the code after adding the classes.

<ul >
    <h2 >
        INTRO
    </h2>
    <br>
    <li >
        content
        <span >1</span>
    </li>
    <li >
        content
        <span >3</span>
    </li>
    <li >
        content
        <span >4</span>
    </li>
    <li >
        content
        <span >9</span>
    </li>
    <li >
        content
        <span >9</span>
    </li>
</ul>