I am working towards achieving a specific layout using Bootstrap 4's card-group feature, as shown in the image below:
The goal is to have everything at the same height within each card (including card-header, card-title, and small subtext if present), ensuring that the first list item in every card starts at the same vertical position, and to have buttons in the footer section of each card.
Here is a snippet of my current code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-group card-group-md">
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Example Header</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title">
Example Title
</h5>
<small>Sample Subtext</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
Sample List Item Content
</li>
<li>
Additional List Item Content
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Select Product</button>
</div>
</div>
</div>
</div>You can view the complete code and visualize it further on this CodePen link.
Currently, I am facing an issue where text wraps inside the grey column on narrow screens (Example Header), disrupting the overall design layout.
To address this problem, would it be possible to achieve the desired layout using just card-group, or would I need to use a combination of row and col classes? Perhaps utilizing some flexbox techniques could offer a solution?