htmlcssbootstrap-4flexbox
Horizontal Scrolling Cards Not Equal Height ( Bootstrap4)
Trying to make horizontal scrolling cards to be equal height.
Have a row of cards wrapped with a "flex-nowrap overflow-auto" div but i am unable.
css "flex-direction:row " or class "flex-row" doesn't help.
Checked multiple posts in Stackoverflow, but almost all are for non scroll able card rows and doesn't work for this.
( Snippet edited as per experts' inputs)
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: 25vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
}
.card { height:100%;}<!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>Horizontal Scrolling Cards equal height</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">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<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">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
</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
Try this
- add
mb-3to everycol-12 - add
h-100tocard
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
that should solve the problem
- To keep the button at same line across cards
you need to add
d-flex flex-colthese classes to thecardelement and also addmt-autoto the anchor button
please refer the code snipped
Code snippet
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: 25vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
}<!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>Horizontal Scrolling Cards equal height</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-col">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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 h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> 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>
<!--*** end of row flex *** -->
</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>- My custom CSS transition animation is not working on hover after I added AOS JS library
- How to set data attributes in HTML elements
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- How to reduce the size of an ASCII text art picture
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- Set element width based on a string that is not in the element
- Where are the trailing commas coming from in these radio buttons?
- 100vh height when address bar is shown - Chrome Mobile
- Capture selected option returns not defined instead
- Adjust navbar minimum height depending on screen width
- How to remove extra width from my website?
- Why doesn't backgroundColor=rgb(a,b,c) work?
- How to put json variable directly into DIV Class
- On hover the div inside button reduces height to give animation and little dark bottom. But text also moving up how to fix not move text
- WOW jquery slider
- Reduce the frequency of geolocation watchPosition calls
- Why should HTML elements (input, textarea, and select) have associated labels?
- Why ngModel doesn't works on the last version of Angular 17?
- How to make an element's background-color a little darker using CSS
- How do I clear the content of a div using JavaScript?
- How do I display images from Google Drive on a website?
- Tailwind h-screen doesn’t work properly on mobile devices
- Edit icon in mobile view missing
- Sticky header input scrolls on input
- Image not loading on local site I made
- React error in index.js, "Uncaught ReferenceError: dom is not defined"
- Make the mix-blend-mode on a sticky navbar ignore certain elements while scrolling down
- How to prevent bleach from escaping > (blockquote) tag used in Markdown
- Why is the input bar spilling slightly on the right side of the container?
- Method to show native datepicker in Chrome