htmlcssbootstrap-4flexbox
Bootstrap 4 Flexbox Horizontal Scrolling Cards NOT working with less then 8 cards
Having an issue with Bootstrap 4 flexbox in creating horizontally scrollable cards on Desktop Screens ( works okay on mobile responsive mode):
Issue # 1: Unless there are a minimum of 8 cards, the cards are not filling the horizontal flexbox 'visible' window properly
Case A: 3 cards, the flexbox window is totally skewed and the 'badge' from below bills in there.
Case B: 7 cards, flexbox is almost filled, but there is a gap on left side.
Case C: 8 cards, all perfect , visible & scrolling perfectly.
Issue 2: if the content in the card pushes the Button, how can I fill it with space, so that the buttons are in line?
@CBroe you gave the cue, i added .row { width:100%; max-width:100vw; }
and now it is working as expected , updating the
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;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 20vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
font-size: 0.75em;
}
.card {
height: 100%;
}
.row {
width: 100%;
max-width: 100vw;
}
.badge {
width: 10rem;
flex: 1 0 auto;
font-size: 1em;
font-weight: 300;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Case A: Horizontal Scrolling Cards with 3 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto ">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2>Case B: Horizontal Scrolling Cards with 7 cards </h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2> Case C: Horizontal Scrolling Cards with 8 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>8 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Solution
Using cues from experts here, resolved the issues:
- Added .row { width:100%; max-width:100vw; } to ensure even with 3 cards the width of the flex-box doesn't shrink.
- Added d-flex flex-auto to card & mt-auto to ensure buttons appear in same line
Thank you
- Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
- centering a div on background image which has 100vh as height
- how to send styles with html email
- Button doesn't have obvious onclick event
- Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true warnings
- TypeError: Cannot set property 'innerHTML' of null with a correct script location and div ID
- Is it possible to change the text content displayed in an SVG image by setting specific data-* attributes in the html <svg> tag?
- HTML table row/column span shift row one up
- Angular: Append dynamic created component as a child of the target-Element
- CSS ellipsis on second line
- Conditional rendering based on authentication security question
- Working alternative for {background-clip: text} to achieve transparent text with gradient background in browsers other than Chrome
- IOS Safari: unwanted scroll when keyboard is opened and body scroll is disabled
- Can't show icon with fontawesome's react-js library
- New subscriptions always returning intial value instead of current value
- How to have a text-overflow ellipsis at the beginning of a left-to-right element
- ion datetime component persist value across different components
- Google Maps Autocomplete Result in Bootstrap Modal Dialog
- Changing vertical scroll to horizontal
- How to change the navbar color of a Quarto website using brand.yml?
- grid header will be hide in p-dialog during minimize the browser
- How to get div content to take up available space when another element inside of it changes size?
- HTML slider with two inputs possible?
- how to make a data-attr read HTML
- Can CSS resize property be used to resize flex column widths?
- Print each value of a delimited string as an HTML list item
- overflow-y: hidden but should enable mouse scrolling
- loading="lazy" but for html5 videos
- Video auto play is not working in Safari and Chrome desktop browser
- How to position an element to the right side?