Encountering an issue with Bootstrap 4 flexbox while trying to create horizontally scrollable cards on Desktop Screens (works fine on mobile responsive mode):
Problem #1: When there are less than 8 cards, the cards do not fill the horizontal flexbox window properly
Scenario A: With only 3 cards, the flexbox window appears distorted and the 'badge' from below overlaps.
Scenario B: On having 7 cards, the flexbox is almost full but there's a gap on the left side.
Scenario C: At 8 cards, everything looks perfect - visible & scrolling smoothly.
Issue 2: If the content in a card pushes the button, how can I add space so that the buttons remain aligned?
@CBroe suggested adding .row { width:100%; max-width:100vw; }
https://i.sstatic.net/jUAzN.png
body {
padding: 5px;
}
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
... (omitted for brevity) ...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">