Bootstrap 4 - card group same height of card-body etc [duplicate] - html

Question

This question already has an answer here:
Align bootstrap-cards contents
(1 answer)
Closed 4 years ago.
I want to achieve the following result with Bootstrap 4's card-group:
Same height of everything (card-header, card-title and small subtext if present, each first list item starts at the same vertical position, buttons in footer).
My code so far:
<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">Kostenlos (Einführungsangebot)</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title">
Kostenlos
</h5>
<small>Preis inkl. MwSt.</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität in aktuellen Auktionen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
5 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
7 Tage kostenloser Archiv-Zugang zu<br>über 25 Millionen Auktionslosen<br><strong>am Tag Ihrer Registrierung</strong>
</li>
<li>
<i class="fa fa-fw fa-check"></i>
7 Tage kostenloser Zugang zu <br>unserem Künstlerindex mit Charts & Analysen<br><strong>am Tag Ihrer Registrierung</strong>
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Basic</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title"> 9,95 € <span class="period">/ Monat</span> </h5>
<small>Preis inkl. MwSt.</small>
<small>Mindestvertragslaufzeit: 12 Monate *
</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
25 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Künstlerindex mit Charts & Analysen
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Premium</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title"> 29,95 € <span class="period">/ Monat</span> </h5>
<small>Preis inkl. MwSt.</small>
<small>Mindestvertragslaufzeit: 12 Monate *
</small>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Merkzettelfunktion
</li>
<li>
<i class="fa fa-fw fa-check"></i>
500 Suchaufträge (Alerts)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Künstlerindex mit Charts & Analysen
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
<div class="card mb-4 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Auf Anfrage</h4>
</div>
<div class="card-body">
<h5 class="card-title pricing-card-title">
Auf Anfrage
</h5>
<ul class="list-unstyled mt-3 mb-4">
<li>
<i class="fa fa-fw fa-check"></i>
Individueller Scout-Service
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Beliebig viele Suchaufträge (> 500)
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Alle LotSearch Services
</li>
<li>
<i class="fa fa-fw fa-check"></i>
Sie erhalten zunächst unsere kostenlose Mitgliedschaft, bis wir Ihnen ein individuelles Angebot vorgeschlagen haben, mit dem Sie einverstanden sind.
</li>
</ul>
</div>
<div class="card-footer bg-white">
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
</div>
</div>
</div>
https://codepen.io/anon/pen/EdpraE
At the moment I have the problem, that the text wraps in the grey column on narrow (Kostenlos (Einführungsangebot)) which breaks the clean layout.
The following image shows my problems:
Is this possible with card-group or do I need to fiddle with row+col classes? Maybe possible with some flexbox magic?

Answer 1

You can't expect the elements to have the same size since the text grows down.
What I do in this specific scenarios is to set a min-height to the specific section, so imagine you want the header to have the size in the first card, just set a min-height to the header like 150px;
Regarding the list, if has more items all the sections should grow related to that section. You can do that by applying height 100% on the cards;
I think in that specific scenario what you need is just to set a min-height to the card-header, tried applying min-height: 109px

Answer 2

This is possible by 2 ways.
The first one (CSS-ONLY) is the easiest one but the ugliest one.
This is to set the height of the header to the 2 rule display.
This is ugly because if there are only fields with 1 rule it will have too much space. If it has more, the text will come out of the box. However if you make your text responsive by using rem,vw,vh,.. It will scale as well.
The second one (JS) is way prettier but works with javascript. This looks for the biggest size and sets all other divs to this.
You can call this event on window.resize.
Documentation:
Resize
JS to equalize heights