How to Align Bootstrap Buttons at the Bottom of Cards?

Aligning Bootstrap Buttons at the Bottom of Cards

Problem Statement

When working with Bootstrap's card-deck and card classes, misalignment can occur when one card's content varies in size. This issue is particularly evident when trying to vertically align buttons at the bottom of each card.

Solution

Bootstrap 4 provides modifier classes that offer an elegant solution to this alignment challenge:

1. Append d-flex to the .card-body
2. Append flex-column to the .card-body
3. Append mt-auto to the .btn element nested within the .card-body

Code Modifications

<div class="card-deck">
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 1 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 1</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body d-flex flex-column">
      <p class="card-text">Card 2 content</p>
      <button type="button" class="btn btn-primary mt-auto">Button 2</button>
      <button type="button" class="btn btn-primary mt-auto">Button 3</button>
    </div>
  </div>
</div>

Conclusion

Utilizing these modifier classes automatically aligns buttons at the bottom of cards, regardless of content variations. This ensures a consistent and visually appealing presentation.

The above is the detailed content of How to Align Bootstrap Buttons at the Bottom of Cards?. For more information, please follow other related articles on the PHP Chinese website!