Bootstrap 4 cards - align content at the bottom

Question

I have a group of bootstrap cards put together in a card-group, meaning they all have the same width and height. Each card\'s content is different in height, and I need a bu

Answer 1

Use the flexbox utils and/or auto margins. For example, you can make the .card-body display:flex (d-flex flex-column) and the margin-top:auto (mt-auto) to push the button down...

https://codeply.com/go/mfrRHlgydc

<div class="card-group">
        <div class="card">
            <div class="card-header">
                Header
            </div>
            <div class="card-body d-flex flex-column">
                <div>
                    Line 1
                </div>
                <div>
                    Line 2
                </div>
                <div class="mt-auto">
                    <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
                </div>
            </div>
            <div class="card-footer">
                 ...
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                Header
            </div>
            <div class="card-body d-flex flex-column">
                <div>
                    Line 1
                </div>
                <div>
                    Line 2
                </div>
                <div>
                    Line 3
                </div>
                <div class="mt-auto">
                    <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
                </div>
            </div>
            <div class="card-footer">
                ..
            </div>
        </div>
    </div>

Related questions:
Bootstrap - align button to the bottom of card
Aligning items within a Bootstrap 4 .card using Flexbox