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?

Possible duplicate of [How to align a
to the middle (horizontally/width) of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-horizontally-width-of-the-page) — jwpfox, Aug 19 '16 at 05:05

Shahil M · Accepted Answer · 2017-09-07T13:21:42.430

167

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.

edited Sep 07 '17 at 13:21

answered Aug 19 '16 at 04:49

Shahil M

3,836
4
25
44

22

In bootstrap 4, to center a card in a grid col, use
.
– ObjectiveTC Jun 09 '17 at 08:25
1

Applying to global is bad practice, see @ZimSystem for the correct way. – Lawrence Cherone Aug 31 '17 at 02:31
1

This is more of a CSS solution than a Bootstrap solution. Answer below makes more sense. – U0001 Oct 22 '17 at 22:54
.mx-auto did the work, thanks! – MikhailRatner Nov 25 '21 at 18:26
BTW: if you need to center a div horizontally AND vertically, you can use `m-auto` (without the x). – MikhailRatner Nov 30 '21 at 10:23

Carol Skelly · Answer 2 · 2021-04-29T12:13:05.113

125

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.

edited Apr 29 '21 at 12:13

answered Mar 02 '17 at 15:25

Carol Skelly

351,302
90
710
624

I used this with the img in a card, but I had to remove card-img-top. – johnny Sep 13 '17 at 15:14
To align one card in center inside card deck, replace the deck for row and uses the 4th answer of this answer. btw, thanks! – Leandro Bardelli Oct 19 '20 at 15:36

score 28 · Answer 3 · answered Sep 15 '20 at 05:52

28

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

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

answered Sep 15 '20 at 05:52

Akhil Shukla

491
5
10

score 9 · Answer 4 · answered Feb 22 '22 at 23:36

9

wrap all cards in a bootstrap row

<div class="row justify-content-center"> your cards loop </div>

answered Feb 22 '22 at 23:36

Astro

641
2
6
13

This will center cards but not the content inside, so then include `text-center` within the card body element as well to center content `
`
– Olney1 Oct 18 '22 at 21:46

score 6 · Answer 5 · answered Jan 18 '22 at 11:39

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

score 2 · Answer 6 · answered Aug 22 '22 at 05:51

there is no need for any internal external CSS to center the card if you have used booststrap.

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

just use

      mx-auto    // place this code in your main card div

score 1 · Answer 7 · edited Sep 27 '20 at 10:03

1

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.

edited Sep 27 '20 at 10:03

Jason R Stevens CFA

2,232
1
22
28

answered Mar 17 '20 at 05:19

bharti parmar

27
3

score 1 · Answer 8 · answered Sep 11 '20 at 19:20

1

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;
}

answered Sep 11 '20 at 19:20

Newbie for eternity

11
2

score 0 · Answer 9 · answered Jan 20 '22 at 23:34

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>

How to center cards in bootstrap 4?

9 Answers9

You can also use Bootstrap 4 flex classes

Linked

Related