How to center two columns of list items using Bootstrap 5, or CSS

Question

Currently struggling to center two columns that contain text, specifically two lists.

The idea is to have two columns on the same row with the two lists centered, and their respecitve list items aligned like normal bullet points.

Any advice would be appreciated.

Code here:

<div class="container d-none d-md-block text-center">
    <div class="row">
        <div class="col">
            <div class="row">
                <h4 style="color:#2CA851;"><strong>Premium</strong></h4>
            </div>
            <div class="row">
                <h4 style="color:#2CA851;">Academic Advantage</h4>
            </div>
            <ul class="row list-group list-unstyled ">
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle px-1" style="color:#2CA851;" ></i>Unlimited A+ Exam Focused Revision Notes.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;" ></i>Past Examinations and Questions by Topic.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;" ></i>A+ Sample Essays, Quizzes, and Math Content.</span>
                </li>
            </ul>
        </div>
        <div class="col">
            <div class="row">
                <h4 style="color:#EF6F5E;"><strong>Limited Access</strong></h4>
            </div>
            <div class="row">
                <h4 style="color:#EF6F5E;">Ordinary Outcome</h4>
            </div>
            <ul class=" row list-group list-unstyled">
                <li class="row p-1 list-group-item border-0" style="color: #001847;">
                    <span><i class="h5 fa fa-times-circle px-1" style="color:#EF6F5E;"></i>Restricted Access. Limited Features.</span>

                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Less than 10% of Premium Material.</span>

                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Older Content & Legacy Features.</span>

                </li>
            </ul>
        </div>
    </div>
</div>

Current attempt col-6

This uses col-6 for each column and doesn't center properly. Using text-center on the container for this row yeilds the following.

Using text-center However this issue with this is that now the icons for each list item are miss-aligned.

EDITS: Using justify-content-center recommended by @surya-prima-siregar and @harvir This is closer to a solution however I'd still like for these lists to be centered based on the buttons below, instead of appearing at the start of each button.

Huge thanks to @alexandra-batrak for the solution See the answer by @alexandra-batrak below

Answer 1

You can use the MX-Auto Class on Bootstrap, alternatively you can also use the justify-content-center class on.row class. for more details you can visit the following link

Answer 2

I have removed unnecessary row classes and their divs.

`

<div class="container d-none d-md-block" style="height: 400px;">
    <div class="row">
        <div class="col">
            <h4 style="color:#2CA851;"><strong>Premium</strong></h4> 
            <h4 style="color:#2CA851;">Academic Advantage</h4>
        <ul class="list-group list-unstyled ">
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle px-1" style="color:#2CA851;"></i>Unlimited A+ Exam Focused Revision Notes.</span>
            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>Past Examinations and Questions by Topic.</span>
            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>A+ Sample Essays, Quizzes, and Math Content.</span>
            </li>
        </ul>
    </div>
    <div class="col">
        <h4 style="color:#EF6F5E;"><strong>Limited Access</strong</h4>      
        <h4 style="color:#EF6F5E;">Ordinary Outcome</h4>
        <ul class=" list-group list-unstyled">
            <li class=" p-1 list-group-item border-0" style="color: #001847;">
                <span><i class="h5 fa fa-times-circle px-1" style="color:#EF6F5E;"></i>Restricted Access. Limited Features.</span>

            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Less than 10% of Premium Material.</span>

            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Older Content &amp; Legacy Features.</span>

            </li>
        </ul>
    </div>
</div>

`

.row {   
    display: flex;      // it should already be in bootstrap
    justify-content: space-around;   
    margin: auto;       // helps to get them a bit closer by removing bootstrap margin
}

.col {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
}

`

If you want the lists to display aligned left, you should remove the text-centered class.

Answer 3

make it a flex then justify the content to the center, another way is margin auto if they were in one div