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?
This question is related to
html
css
bootstrap-4
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.
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.
Put the elements which you want to shift to the centre within this div tag.
<div class="col d-flex justify-content-center">
</div>
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;
}
Update 2018
There is no need for extra CSS, and there are multiple centering methods in Bootstrap 4:
text-center for center display:inline elementsmx-auto for centering display:block elements inside display:flex (d-flex)offset-* or mx-auto can be used to center grid columnsjustify-content-center on row to center grid columnsmx-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.
Source: Stackoverflow.com