How to Align Buttons at the Bottom of Bootstrap Cards?

Aligning Buttons at the Bottom of Bootstrap Cards

As you've observed, the alignment of buttons within Bootstrap cards can become problematic when their content varies in length. To effectively align buttons at the bottom of each card:

1. Implement Flexbox: Add the d-flex class to the .card-body element to enable flexbox layout.
2. Add Column Alignment: Use the flex-column class on .card-body to vertically align the content within the card.
3. Use Margin Auto to Align Buttons: Add the mt-auto class to the .btn elements nested inside .card-body. This automatically aligns the buttons at the bottom of the card-body, vertically filling the remaining space.

Refer to the following code snippet for an example:

<div class="card">
  <div class="card-body d-flex flex-column">
    <p>Card Content</p>
    <button type="button" class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

By implementing these steps, you can ensure that all buttons within your Bootstrap cards are consistently aligned at their respective bottoms, regardless of content variations.

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