How to button align bottom in bootstrap 4

Question

<div class="row">


    <div class="col-lg-3 col-md-6 col-11 d-flex flex-column text-center ng-star-inserted">
        <div class="card prcard">
            <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg">
                <div class="card-body d-flex flex-column">
                    <h3 class="card-titlemb-3">vendor menu 1</h3>
                    <h4>
                        <b>$</b>12
                    </h4>
                    <p style="width: 100%;">gigivendor item des</p>
                    <div class="row mx-0 mt-auto btn-group">
                        <div class="col-10 px-0 pr-1">
                            <button class="btn btn-primary btn-block">Add To Cart </button>
                        </div>
                        <div class="col-2 px-0">
                            <button class="mt-auto btn btn-danger btn-block">-</button>
                        </div>
                    </div>
                </div>
        </div>
    </div>


    <div class="col-lg-3 col-md-6 col-11 d-flex flex-column text-center ng-star-inserted">
        <div class="card prcard">
            <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg">
                <div class="card-body d-flex flex-column">
                    <h3 class="card-titlemb-3">vendor menu 1</h3>
                    <h4>
                        <b>$</b>12
                    </h4>
                    <p style="width: 100%;">gigivendor item dessdsssssssssssssss sdssssssssss sssssssss</p>
                    <div class="row mx-0 mt-auto btn-group">
                        <div class="col-10 px-0 pr-1">
                            <button class="btn btn-primary btn-block">Add To Cart </button>
                        </div>
                        <div class="col-2 px-0">
                            <button class="mt-auto btn btn-danger btn-block">-</button>
                        </div>
                    </div>
                </div>
        </div>
    </div>



</div>

In this code, the add to cart button not aligned to bottom. How to align the button to bottom. ................................................................................................................................................... Thanks.

This is the output getting now :Sample Image

Answer 1

All you need to do is apply Height: 100% to your card div, once your cards are equal to its parent, you problem will be fixed. instead of writing CSS, you can apply h-100 class on the card as well

Note: I have removed some col-sm, col-md classes for demo purpose, you can put them back

.prcard {height: 100%;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">


    <div class="col-6 d-flex flex-column text-center ng-star-inserted">
        <div class="card prcard">
            <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg">
                <div class="card-body d-flex flex-column">
                    <h3 class="card-titlemb-3">vendor menu 1</h3>
                    <h4>
                        <b>$</b>12
                    </h4>
                    <p style="width: 100%;">gigivendor item des</p>
                    <div class="row mx-0 mt-auto btn-group">
                        <div class="col-10 px-0 pr-1">
                            <button class="btn btn-primary btn-block">Add To Cart </button>
                        </div>
                        <div class="col-2 px-0">
                            <button class="mt-auto btn btn-danger btn-block">-</button>
                        </div>
                    </div>
                </div>
        </div>
    </div>


    <div class="col-6 d-flex flex-column text-center ng-star-inserted">
        <div class="card prcard">
            <img height="200px" alt="Card image cap" class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%; object-fit: scale-down;" src="https://cdn.hasselblad.com/hasselblad-com/3efb310d-21c1-442a-85b9-4c426102d1e9_x1d-ii-xcd45p-01-web.jpg">
                <div class="card-body d-flex flex-column">
                    <h3 class="card-titlemb-3">vendor menu 1</h3>
                    <h4>
                        <b>$</b>12
                    </h4>
                    <p style="width: 100%;">gigivendor item dessdsssssssssssssss sdssssssssss sssssssssgigivendor item dessdsssssssssssssss sdssssssssss sssssssssgigivendor item dessdsssssssssssssss sdssssssssss sssssssss</p>
                    <div class="row mx-0 mt-auto btn-group">
                        <div class="col-10 px-0 pr-1">
                            <button class="btn btn-primary btn-block">Add To Cart </button>
                        </div>
                        <div class="col-2 px-0">
                            <button class="mt-auto btn btn-danger btn-block">-</button>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>