引导程序中的垂直和水平调整卡

Question

I've tried forever to get my bootstrap cards to line up correctly, and now I've finally reverted to creating my own question, so hope someone can help!

The cards originally were all the same width and stacked correctly, however the height was off. They were in a row, but would only stretch to the height of the content.

Now I found a solution which worked for the height by using d-flex align-items-stretch in the div. However now when I move to smaller devices, the height matches but the width now stretches with the content. Any suggestions?

<section class="row ">
<div class="col-12">
    <h3 class="mb-4">Row Title</h3>
</div>

<div class="col-lg-6 mb-4 d-flex align-items-stretch">
    <div class="card">
        <div class="card-header">Card 1</div>
        <div class="card-block">
            <p><b>Overview:</b> Text 1<br><br>
            <b>More:</b> Text 2<br><br></p>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> &nbsp;Go</button>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> &nbsp; Information</button>

        </div>
    </div>
</div>

<div class="col-lg-6 mb-4 d-flex align-items-stretch">
    <div class="card text-white bg-success">
        <div class="card-header">Card 2</div>
        <div class="card-block">
            <p><b>Overview:</b> Text 2</b></p>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> &nbsp;Go</button>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> &nbsp; Information</button>
        </div>
    </div>
</div>              

https://imgur.com/a/JFJGV

Answer 1

You can use w-100 on the cards if you want them to stretch/fill horizontal width.

https://www.codeply.com/go/cwg3qP1ABZ

Also, note that in Bootstrap 4.0.0 card-block is now card-body for padding in the cards.