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

User · Answer

i basically suggest equal gap on right and left  and setting width to auto  Here like   bmi             my additional class name -for card       margin-left  18             margin-right  18       width  auto

User · Answer

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

User · Answer

Update 2018 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

User · Answer

Put the elements which you want to shift to the centre within this div tag   lt div class  quot col d-flex justify-content-center quot  gt   lt  div gt

User · Answer

You can also use Bootstrap 4 flex classes Like   align-item-center and  justify-content-center  We can use these classes identically for all device view   Like   align-item-sm-center   align-item-md-center   justify-content-xl-center   justify-content-lg-center   justify-content-xs-center   text-center class is used to align text in center

[html] How to center cards in bootstrap 4?

Examples related to html

Examples related to css

Examples related to bootstrap-4