html - How to center cards in bootstrap 4?

Question

I am using bootstrap 4 alpha 3.
I want to center the card horizontally in the middle across the page.

Preview / link: http://codepen.io/vaibhavsingh97/full/VjRAXW

I have tried all the different options listed on the bootstrap 4 example page for cards.

How can I achieve this?

Answer 1

Add the css for .card

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

here is the pen

UPDATE: You can use the class .mx-auto available in bootstrap 4 to center cards.