How can I have each rowdisplay 4 cards and, of course, if the screen size changes, make them stack. Ideally, there should be some space in between them. I've tried all possible combinations I could research.
#cardsContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: scroll;
overflow: hidden;
height: 1200px;
}
.card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 16px;
width: calc(25% - 16px);
padding-bottom: 10px;
font-size: 12px;
border-radius: 5px !important;
flex-basis: 25%;
outline-width: 0px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
outline: none;
border: none;
border-radius: 7px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 -5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media only screen and (max-width: 767px) {
.card {
width: 100%;
margin-bottom: 10px;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
</script>
<div id="cardsContainer">
<div >
<div >
<div >
<div >
<form>
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div ><label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" value="2023-01-29"></div>
</div>
<div ><label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a></div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</form>
</div>
</div>
<div >
<div >
<form>
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div ><label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" value="2023-01-29"></div>
</div>
<div ><label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.glde/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a></div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</form>
</div>
</div>
<div >
<div >
<form>
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div ><label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" value="2023-01-29"></div>
</div>
<div ><label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.dgle/nTUL97" target="_blank">
<input type="text" value="https://posdts.gle/nTUL97"></a></div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</form>
</div>
</div>
<div >
<div >
<form>
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div ><label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" value="2023-01-29"></div>
</div>
<div ><label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.gle/ndTUL97"></a></div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</form>
</div>
</div>
<div >
<div >
<form>
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div ><label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><label for="date">Date:</label>
<input type="date" value="2023-01-29"></div>
</div>
<div ><label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posdts.gle/nTUL97" target="_blank">
<input type="text" value="https://posts.dgle/nTUL97"></a></div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</form>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
Please read the bootstrap docs on responsive classes, I used them in this code (col-md-6) so that from tablets onwards the display was two cards, while on larger screens it shows 4 cards (col-xl-3)
Ps. I cleaned up the code and added the meta viewport, it is important for mobile viewing!
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
#cardsContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: scroll;
overflow: hidden;
/*height: 1000px; WHY?*/
}
.card {;
font-size: 12px;
border-radius: 5px !important;
flex-basis: 25%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
outline: none;
border: none;
border-radius: 7px;
flex-direction: inherit!important;
}
/* .row {
margin: 0 -5px;
}
.row:after {
content: "";
display: table;
clear: both;
} */
@media only screen and (max-width: 767px) {
.card {
width: 100%;
margin-bottom: 10px;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
</script>-->
<body>
<div id="cardsContainer">
<div >
<!--CARD DEMO-->
<div >
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="date">Date:</label>
<input type="date" value="2023-01-29">
</div>
<div >
<label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a>
</div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</div>
</div>
<!--CARD DEMO-->
<div >
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="date">Date:</label>
<input type="date" value="2023-01-29">
</div>
<div >
<label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a>
</div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</div>
</div>
<!--CARD DEMO-->
<div >
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="date">Date:</label>
<input type="date" value="2023-01-29">
</div>
<div >
<label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a>
</div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</div>
</div>
<!--CARD DEMO-->
<div >
<div >
<div >
<label for="quarter">Quarter:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="monthNum">Month:</label>
<select value="2">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="weekNum">Week:</label>
<select value="1">
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div >
<label for="date">Date:</label>
<input type="date" value="2023-01-29">
</div>
<div >
<label for="status">Status:</label>
<select value="Planned">
<option value="Planned" selected="">Planned</option>
<option value="Published">Published</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<div >
<label for="status">Image URL:</label>
<input type="text" value="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg">
<a href="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" target="_blank">
<img src="https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg" height="190px">
</a>
</div>
<div >
<label for="post">Post:</label>
<textarea >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /</textarea>
</div>
<div >
<label for="publishedPostLink">Published Link:</label>
<a href="https://posts.gdle/nTUL97" target="_blank">
<input type="text" value="https://posts.glde/nTUL97"></a>
</div>
<div hidden="">
<label for="postNum">Post Number:</label>
<input type="text" value="1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>