How to Align Buttons at the Bottom of Bootstrap Cards with Different Content Lengths?

Aligning Buttons at the Card Bottom using Bootstrap

One common challenge encountered while working with Bootstrap card decks is aligning buttons vertically when some cards have fewer items. The issue arises due to differences in list lengths among cards.

To address this, you can employ the following Bootstrap 4 modifier classes:

1. d-flex to .card-body: This establishes a flexbox container for the card body.
2. flex-column to .card-body: Sets the flexbox container to a vertical direction.
3. mt-auto to .btn nested in .card-body: Adds automatic spacing to position the button at the bottom of the container.

HTML Example:

<div class="card">
  <div class="card-body d-flex flex-column">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Item 1</li>
      <li class="list-group-item">Item 2</li>
    </ul>
    <button class="btn btn-primary mt-auto">Button</button>
  </div>
</div>

Fiddle Demonstration:

Refer to the following fiddle for a live demonstration: https://jsfiddle.net/IGN7K/

By implementing these classes, you can ensure that buttons are consistently aligned at the bottom of all cards, regardless of their content length.

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