Why isn't the card-deck div aligning the cards?

user_19049176 0
Viewed 34

Wondering why this top card-deck is not aligning my cards! I have run the code successfully with just the cards, when I add the card-deck I expect for the cards to align with same height and width but nothing is happening. The cards still are in the same column. Please help!

<div class="card-deck">
  <div class="card">
     <div class="card-header">
      <h3>Chihuahua</h3>
     </div>
     <div class="card-body">
      <h2>Free</h2>
      <p>5 Matches Per Day</p>
      <p>10 Messages Per Day</p>
      <p>Unlimited App Usage</p>
      <button type="button">Sign Up</button>
     </div>
    </div>

      <div class="card">
        <div class="card-header">
          <h3>Labrador</h3>
        </div>
        <div class="card-body">
          <h2>$49 / mo</h2>
          <p>Unlimited Matches</p>
          <p>Unlimited Messages</p>
          <p>Unlimited App Usage</p>
          <button type="button">Sign Up</button>
  </div>
</div>
css html
1 Answers

First alternative

Have you tried using "Inline-Block" as a value for the property display? Well, try including this code in the head of your document:

<style>

   .card{background-color: aliceblue; display: inline-block;}
    
</style>

This will align the cards in a single line and you can still set both width and height of them if you want to do so.

Second alternative

You can also use a flexible display in the parent container as a second solution. This will allow you to set a gap (space between the cards) and justify them.

<style>

   /* If you want to set a gap, include the property gap and set a value */

   .card-deck{display: flex; /* gap: 1vw */}
    
</style>

If you want more information about flex containers and how to use them, I recommed you this website:

https://www.w3schools.com/css//css3_flexbox_container.asp

user_161485850
Related