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> Go</button>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> 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> Go</button>
<button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> Information</button>
</div>
</div>
</div>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.