<div class="row">
                <div class="col-12">
                    <h1 class="mt-5">DANCING</h1>
                    <p class="mt-3">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
                        Provident repellendus fuga molestiae vitae ex dolore deleniti
                        assumenda fugiat ducimus incidunt!
                    </p>
                </div>
            </div>

            <div class="row justify-content-evenly mt-5">
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/2.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">AMERICA</h5>
                            <p class="card-text">
                                Some quick example text to build on the card title and make up
                                the bulk of the card's content.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/3.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">ASIA</h5>
                            <p class="card-text">
                                Some quick example text to build on the card title and make up
                                the bulk of the card's content.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-5">
                    <div class="card" style="width: 18rem">
                        <img src="images/4.png" class="card-img-top" alt="..." />
                        <div class="card-body bg-dark">
                            <h5 class="card-title">AUSTRALIA</h5>
                            <p class="card-text">
                                Some quick example text to build on the card title and make up
                                the bulk of the card's content.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I am trying to center the cards but its not getting centered properly, i gave the row 3 columns and divided the spaces evenly but still its not aligned

here is how it is looking

https://imgur.com/2opOvXf

CodePudding user response：

You are getting exactly what you wrote. 3 stacks, each of 3 columns which are aligned evenly. The reason your output is like that is because your card doesn't take the entirety of your 3 columns that you have assigned. (Try adding a different bg-color to each col-md-3 class and you'll see that it is evenly distributed).

Your possible options:

1. You can make the card take 100% of the 3 columns. Replacing your width: 18rem; with width: 100%, or you can use w-100 class of Bootstrap.
2. You can add a mx-auto to each card, which will align it to the center of the 3 columns it has.

I'd recommend the 2nd option as it doesn't need you to change the width of the column.