Cards Bootstrap 4 in one line

Question

I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.

My code:

<div class="row">
      <div class="col-md-12">


  <div class="card mdb-color lighten-2 text-center z-depth-2">
              <div class="card-body">
                  <p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
                   ?>.</p>
              </div>
          </div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
            <div class="card-body">
                <p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
                 ?></p>
            </div>
        </div>

      </div>
    </div>

I tried to give it a class of d-inline but it's not working...

The cards I'm using https://mdbootstrap.com/components/panels/

Answer 1

Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:

<div class=card-deck>
<!-- First Card -->
    <div class="card">
        <div class="card-title">Title here</div>
        <div class="card-body">Body here</div>
    </div>
<!-- Second Card -->
    <div class="card">
        <div class="card-title">Title here</div>
        <div class="card-body">Body here</div>
    </div>
</div>

Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.