For my Bootstrap card project, I have some specific rules in mind:
- The card should have a minimum width of 250px (card #1 - looks good)
- If the first line exceeds 250px in length, the card should increase its width without wrapping the line (card #2 - width doesn't increase enough, line wraps)
- If both parts of the second line are longer than 250px each, the card should expand width-wise and not wrap either line (card #3 - width stays the same, lines wrap)
- The third line will always wrap but should not impact the card's width (card #4 - width increases unnecessarily).
https://i.sstatic.net/3zUDx.png
Additionally, the cards are not rendering correctly on smartphones.
https://i.sstatic.net/n0MvU.png
I'm puzzled as to why my code is not functioning as expected.
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f4459445a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="d-flex">
<div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
<div class="">#1 Short string</div>
<div class="d-flex justify-content-between">
<div>Left</div>
<div>Right</div>
</div>
<div class="text-wrap">Short wrapped string</div>
</div>
<div class="w-100">
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
<div class="">#2 Very very very very very very very very long string</div>
<div class="d-flex justify-content-between">
<div>Left</div>
<div>Right</div>
</div>
<div class="text-wrap">Short wrapped string</div>
</div>
<div class="w-100">
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
<div class="">#3 Short string</div>
<div class="d-flex justify-content-between">
<div>Left left left left</div>
<div>Right right right right</div>
</div>
<div class="text-wrap">Short wrapped string</div>
</div>
<div class="w-100">
</div>
</div>
<div class="d-flex">
<div class="d-flex flex-column border border-black m-2 p-2" style="min-width:250px;">
<div class="">#4 Short string</div>
<div class="d-flex justify-content-between">
<div>Left</div>
<div>Right</div>
</div>
<div class="text-wrap">Very very very very very very very very very very very very very very long wrapped string</div>
</div>
<div class="w-100">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd0cdd3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>