Bootstrap 4 - Center Just Two Cards (Not Three, Just Two)

Question

I am trying to use the card-columns class in Bootstrap 4 to create dynamic pages that might, at times, have from two to as many as 8 different cards in them.

For now, my problem is simple: I am trying to use something like a justify-content-around class to my cards, so that, if there are only two cards, they center themselves on the page next to each other. Right now they stay on the left and they will not move from the left.

I'm just looking for two cards, side by side, on the page.

<div class="container">
<div class="card-columns">
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with shorter text.</p>
    </div>
  </div>
</div>
</div>

Help is very much appreciated.

Answer 1

I got the behavior you described when I added d-flex justify-content-center to your card-columns:

<div class="container">
  <div class="card-columns d-flex justify-content-center">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with shorter text.</p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/3y8ks4em/1/