Badge doesn't move right Boostrap 4

Question

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 class="list-group">
            <h2 class="list-group-item-heading">
             INTRO
            </h2>
            <br>
            <li class="list-group-item">
                content
                <span class="badge">1</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">3</span>
            </li>
            <li class="list-group-item">
                  content
                <span class="badge">4</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
            <li class="list-group-item">
                   content
                <span class="badge">9</span>
            </li>
        </ul>

Answer 1

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 class="list-group">
    <h2 class="list-group-item-heading">
        INTRO
    </h2>
    <br>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">1</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">3</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        content
        <span class="badge">9</span>
    </li>
</ul>