How to place card-columns in the center of the page when using bootstrap 4.3.1?

Question

I am trying to horizontally-center a card-columns with Bootstrap 4.3.1 while nesting cards.

Here is how my cards are nested

 > Main Card
   >> Card-columns
      >>> Card 1  
      >>> Card 2     
      >>> Card 3 
      >>> Card N

I tried to place mx-auto class on the main-card and on the card-columns but that did not place the card-columns to the center of the page.

Here is my code

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <main role="main">
        <div class="container-fluid">
            
          <div class="mx-auto card bg-light">
              <div class="card-body">
                  <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
                  <hr />

                    <div class="card-columns mx-auto">

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 1</h5>
                            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>

                        <div class="card text-center">
                          <div class="card-body">
                            <h5 class="card-title">Card 2</h5>
                            <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
                            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                          </div>
                        </div>
                        
                    </div>

              </div>
          </div>

        </div>
    </main>

I created a fiddler to demo what I have done so far.

How can I correctly place the card-column in the center of the screen?

horizontal and/or vertical center? – Carol Skelly Nov 14 '19 at 17:44 — Carol Skelly, Nov 14 '19 at 17:44

pensum · Accepted Answer · 2019-11-15T04:38:16.410

You need to set your container div as a flex-box and then you can apply the bootstrap classes you need.

In this case, you want:
<div class="card-columns mx-auto d-flex justify-content-center col-12">

So because you want to center your card-columns, it's clear that justify-content-center does the job. For your card-columns width, you can play with the class col from bootstrap. Basically, it offers a maximum grid of 12 columns and that would take the whole page's view. And now you can then tell each card how many col-span you need them to take by adding col-[0 to 12] to up to a maximum of 12 because you have set their parent tag col-12.

If it had col-8 instead, your cards could only take up to a maximum of 8 columns.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<main role="main">



  <div class="container-fluid">
    <div class="mx-auto card bg-light">
      <div class="card-body">
        <h2 class="card-title text-center text-uppercase text-info">Cards</h2>
        <hr />

        <div class="card-columns mx-auto d-flex justify-content-center col-12">



          <div class="card text-center col-4">
            <div class="card-body">
              <h5 class="card-title">Card 1</h5>
              <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>

          <div class="card text-center col-4">
            <div class="card-body">
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>



        </div>
      </div>
    </div>
  </div>
</main>

Adding `d-flex justify-content-center` messes up the card-columns. It'll make the block streach instead of centering the blocks — , Nov 14 '19 at 18:26
You want your cards to have the same width as the window grows? — pensum, Nov 14 '19 at 19:00
I am using card-columns to show the cards as equal width regardless of how many I have 1,2,3....N blocks. I just want to position the entire card-column in the center of the page not to the left. — , Nov 14 '19 at 19:02
@John I have edited my post accordingly so now it should work as you expect. — pensum, Nov 15 '19 at 04:01
I ended up removing the column-card altogether. You can evaluate my answer on what i ended up doing — , Nov 16 '19 at 22:40

score 0 · Answer 2 · answered Nov 14 '19 at 20:04

card-colums remove the flexbox of your nested cards. It become inline-block instead and you must align your card with other tricks.

https://getbootstrap.com/docs/4.3/components/card/#card-columns

What you can do is using card-deck and at this point you can put an mx-5 instead of auto. This way each cards will take 50% of the remaining width. The mx-auto won't work in this case because the cards will take the full width, splitting it in two, the the mx-auto will look for the remaining width and apply a margin on each side. In this case, the cards will take 50% each, so no space left for the mx-auto.

The mx-5 or anything from 0 to 5 is apply before the nested element get their respective width.

You can also use card-deck align-items-center and define the width of each cars.

Finally, the problem is you are trying to use inline-block and flex together, but you need to make a choice.

How to place card-columns in the center of the page when using bootstrap 4.3.1?

2 Answers2