Bootstrap 4 Card-Deck with Buttons inside, resizing - css

Question

I caught a problem with a card-deck (3 cards) with bootstrap 4.
Everything looks great, but when you trie a landscape mode with your mobile, the buttons/links inside of each card are not resizing.
For sure, the link-titles are not the shortest, but it should work.
FIDDLE
<div class="container">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/bm.jpg" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/pr.jpg" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="/bw/img/hfk.png" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
</div>
Thank you so much!

Answer 1

As explained in this GitHub thread, text in Bootstrap btn does not wrap which is by-design.
There are 2 workarounds. Add CSS to make the btn text wrap...
.btn {
white-space: normal;
}
Or, use text-truncate and mw-100 on the buttons to show the "..." when the card width narrows...
Mehr erfahren
https://www.codeply.com/go/IdLNh5uUfA

Answer 2

So using your html but with BS 4 links it seems to be working fine, everything seem to be resizing as expected.
Running this snippet in full screen and using the dev tools of Chrome browser in responsive mode when I resize the deck everything resizes appropriately
Even though it looks to be an issue with button whitespace I can see that the 3rd column button still exceeds the card. Maybe consider using viewport font sizing.
.btn {
white-space:normal !important;
font-size:1vw !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="container">
<h1>Aktuelles</h1>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-events-tab" data-toggle="pill" href="#pills-events" role="tab" aria-controls="pills-events" aria-selected="false">Veranstaltungen</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-press-tab" data-toggle="pill" href="#pills-press" role="tab" aria-controls="pills-press" aria-selected="false">Presse</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">
<div class="row">
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Medizinischer Bademeister">
<div class="card-body">
<h5 class="card-title">Wijhg ilgu or!</h5>
<p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>
Mehr erfahren
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Pharmareferent">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
<p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
Ausführliche Informationen
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card" style="height: 100%;">
<img class="card-img-top" src="https://picsum.photos/200/100" alt="Hygienefachkraft">
<div class="card-body">
<h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
<p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
Weiterführendes
</div>
</div>
</div>
<p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
</div>
</div>
<div class="tab-pane fade" id="pills-events" role="tabpanel" aria-labelledby="pills-events-tab">
<h3>Beginn der Ausbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Ausbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">01.08.2018</th>
<td>Phyrapie,<br>Pharmah-technischer Assistent,
<br>Masseur und med. Bademeister,<br>Med.-techn. Asssistent für den OP-Dienst,<br>Sozialbetreuer</td>
</tr>
<tr>
<th scope="row">01.09.2018</th>
<td>Altenpflege (auch verkürzt),<br>Altenpflegehilfe</td>
</tr>
</tbody>
</table>
<br>
<h3>Beginn der Fort- und Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Datum</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">31.08.2018</th>
<td>Berufsbegleitende Weiterbildung als<br> "Fachkraft für Krajh,bkjl.b kjgöl uigiu <br>ein späterer Einstieg ist möglich!</td>
</tr>
<tr>
<th scope="row">09.2018</th>
<td>Berufbegleitende Weiterbildung als "Pharmareferent"<br>jhlkhgljk</td>
</tr>
</tbody>
</table>
<br>
<h3>Physiotherapeutische Weiterbildungen</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Kurstermin</th>
<th scope="col">Weiterbildung</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">06.08. - 31.08.2018</th>
<td>Manuelle Lymphdrainage</td>
</tr>
<tr>
<th scope="row">10.09. - 16.09.2018</th>
<td>Wirbesäulenkurs für PT (W3)</td>
</tr>
<tr>
<th scope="row">09.11. - 11.11.2018</th>
<td>Einführungskurs "Osteopathie" (E0) für <br>Physiotherapeuten</td>
</tr>
<tr>
<th scope="row">12.11. - 18.11.2018</th>
<td>Extremitätenkurs für Ärzte und PT (E1+E2=Ä1)</td>
</tr>
<tr>
<th scope="row">07.12. - 09.12.2018</th>
<td>Kurs Extremitäten / Wirbelsäule E4/W4</td>
</tr>
</tbody>
</table>
<br>
</div>
<div class="tab-pane fade" id="pills-press" role="tabpanel" aria-labelledby="pills-press-tab">
<h3>Presseberichte</h3><br>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Zeitung/Datum</th>
<th scope="col">Thema</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Pressebericht "Deutscher Sportball" / 08.11.2014</th>
<td>Auf zwei Rädern<br>Juniorenweltmeisterin Doreen Heinze...</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 02.06.2013</th>
<td>Mit Herzblut<br>Die Entscheidung für eine Ausbildung...</td>
</tr>
<tr>
<th scope="row">TLZ Erfurt / 28.10.2010</th>
<td>Projekttag im Bildungswerk für Gesundheitsberufe - Das Alter und kleine Kniffe</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 11.03.2009</th>
<td>Offene Türen - Bildungswerk für Gesundheitsberufe lädt am Samstag ein</td>
</tr>
<tr>
<th scope="row">AA Erfurt / 05.07.2006</th>
<td>Neuer Beruf: Medizinsch-technischer Assistent für den OP-Dienst</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>