How to center cards in bootstrap 4?
Update 2019
There is no need for extra CSS, and there are multiple centering methods in Bootstrap 4:
text-center
for centerdisplay:inline
elementsmx-auto
for centeringdisplay:block
elements insidedisplay:flex
(d-flex)offset-*
ormx-auto
can be used to center grid columns- or
justify-content-center
onrow
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.
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.
Put the elements which you want to shift to the centre within this div tag.
<div class="col d-flex justify-content-center">
</div>