How to center cards in bootstrap 4?
HtmlCssBootstrap 4Html Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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.
Solution 3 - Html
Put the elements which you want to shift to the centre within this div tag.
<div class="col d-flex justify-content-center">
</div>
Solution 4 - Html
wrap all cards in a bootstrap row
<div class="row justify-content-center"> your cards loop </div>
Solution 5 - Html
<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>
Solution 6 - Html
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;
}
Solution 7 - Html
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.
Solution 8 - Html
one way you can center your card is by creating three divs the first and the last with equal col-val like this.
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur aut officia ducimus provident facilis nam doloremque porro autem corporis.</p>
</div>
<div class="col-md-3"></div>
</div>
</div>