Is there a way to auto align bootstrap 5 footers in a series of cards? - Html

SeanJ
March 13, 2023
172 views
0 votes
2 Answers

When I try the following html code in bootstrap 5, the third column is longer than the first two columns:

   <!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
 
 <section id="pricing">

    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <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>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <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" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

My understanding is in bootstrap 4, I could use class="card-deck" and all the card would automatically have the same length. This has been removed for bootstrap 5. Is there anything similar in bootstrap 5?

Answers

You will need to add .h-100 to the cards for equal height.

   <!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

 
    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <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>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <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" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p>Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

As @HDP noted, if you just need the cards to all be the same height, than adding h-100 to the card will accomplish that.

If you want your buttons to be in-line, then set the card-body to d-flex flex-column and add flex-grow-1 to the last paragraph tag in each card body. That will push the buttons to the bottom of the card body.

   <!-- bootstrap scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">
 
 <section id="pricing">

    <h2>A Plan for Every Giraffes's Needs</h2>
    <p>Simple and affordable price plans for your and your dog.</p>
    <div class="row row-cols-1 row-cols-md-3 rowy">
      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Chihuahua</h3>
          </div>
          <div class="card-body d-flex flex-column">
            <h2>Free</h2>
            <p>5 Matches Per Day</p>
            <p>10 Messages Per Day</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <!-- w-100 100% as wide as parent -->
            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign</button> 
          </div>
        <div class="card-footer">
            boogle</div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 coly">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Labrador</h3>

          </div>
          <div class="card-body d-flex flex-column">
            <h2>$49 / mo</h2>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <button type="button" class="w-100 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
            <div class="card-footer">
            boogle</div>
        </div>
      </div>
      <div class="col-md-12 col-lg-4">
        <div class="card h-100">  

          <div class="card-header">
            <h3>Mastiff</h3>
            
          </div>
          <div class="card-body d-flex flex-column">
            <h2>$99 / mo</h2>
            <p>Pirority Listing</p>
            <p>Unlimited Matches</p>
            <p>Unlimited Messages</p>
            <p class="flex-grow-1">Unlimited App Usage</p>
            <button type="button" class="w-75 btn btn-lg btn-outline-dark">Sign Up</button>
          </div>
          <div class="card-footer">
            boogle</div>
        </div>
    </div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Is there a way to auto align bootstrap 5 footers in a series of cards? – Html

Answers