CODEWITHSUNDEEP
htmlbootstrap-4
Alan
Alan

Reputation: 396

Cards Bootstrap 4 in one line

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/

Upvotes: 4

Views: 22122

Answers (2)

Dre Jackson
Dre Jackson

Reputation: 771

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.

Upvotes: 7

DarthWader
DarthWader

Reputation: 1036

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>

Upvotes: 6

Related Questions