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/

Please create a runnable example, so that we can actually help. https://stackoverflow.com/help/mcve — Derek Brown, Feb 06 '18 at 16:47
Have you [read the docs](http://getbootstrap.com/docs/4.0/components/card/)? There are several ways to do this.. use the grid, use flex-row, card-deck, card-group, etc... — Carol Skelly, Feb 06 '18 at 16:49

score 7 · Answer 1 · edited Jun 19 '21 at 04:36

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.

score 6 · Accepted Answer · answered Feb 06 '18 at 16:53

One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.

The following code shows two cards, side by side in desktop browser window size.

<div class="row">
    <div class="col-md-6">
        <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", "SDG", "USD")." دولار امريكي";?>.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mdb-color lighten-2 text-center z-depth-2">
                <div class="card-body">
                    <p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
                </div>
            </div>
    </div>
</div>

Cards Bootstrap 4 in one line

2 Answers2