How to center cards in bootstrap 4?

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?

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.

Update 2019

There is no need for extra CSS, and there are multiple centering methods in Bootstrap 4:

• text-center for center display:inline elements
• mx-auto for centering display:block elements inside display:flex (d-flex)
• offset-* or mx-auto can be used to center grid columns
• or justify-content-center on row to center grid columns

mx-auto (auto x-axis margins) will center inside display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various centering methods.

In your case, you can simply mx-auto to the cards.

Put the elements which you want to shift to the centre within this div tag.

<div class="col d-flex justify-content-center">
</div>

<div class="container">
    <div class="row align-items-center vh-100">
        <div class="col-6 mx-auto">
            <div class="card shadow border">
                <div class="card-body d-flex flex-column align-items-center">
                    <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>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>
</div>