this is my first post.
I'm trying to make some cards with Bootstrap 5.
All cards will have the same width/height.
Inside my card body I've a h6 div and i want all my cards aligned on this div.
Is there any way to get it ? I've tried various flexbox classes from Bootstrap documentation but didn't work.
My code :
<div >
<div >
<div >
<img src="......" alt="..." >
<div >
<div >
<p><span >Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
lorem du<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetur adip. Lorem
and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc
shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz
rstfv
Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
</p>
</div>
<div >
<h6 >Books</h6>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
</div>
</div>
<div >
<p ><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip.
Lorem
ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
</p>
</div>
</div>
</div>
<div >
<div >
<img src="......" alt="..." >
<div >
<div >
<p><span >Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
lorem du<br>
Lorem ipsum dolor sit amet, consectetuer adipis.<br>
Lorem ipsum dolor sit amet, consectetur adip. Lorem
and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
</p>
</div>
<div >
<h6 >Books</h6>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a>
</div>
</div>
</div>
</div>
<div >
<p ><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
</p>
</div>
</div>
</div>
</div>
CodePudding user response：
Here you go...
1. Change HTML:
- Add
d-flex flex-columnto the<div >. - Add
mt-autoto the<div id="books">.
This will push all boxes with a list of books to the bottom of the card body.
2. Add JavaScript:
You want all boxes with a list of books to be the same height (i.e., equal to the highest box). So, you need to check which box with a list of books is the highest and change the height of all boxes to that height (see comments in the JavaScript code below).
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-kjU l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div >
<div >
<div >
<img src="......" alt="..." />
<div >
<div id="text">
<p>
<span >Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet,
consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
</p>
</div>
<div id="books">
<h6 >Books</h6>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
</div>
</div>
<div >
<p >
<span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
</p>
</div>
</div>
</div>
<div >
<div >
<img src="......" alt="..." />
<div >
<div id="text">
<p>
<span >Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
</p>
</div>
<div id="books">
<h6 >Books</h6>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
<div >
<div >We, the Living</div>
<div ><a href="..." download>pdf</a></div>
</div>
</div>
</div>
<div >
<p >
<span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
</p>
</div>
</div>
</div>
</div>
<script>
let myArray = [];
/* Get height of the first div with id="books" */
let box1 = document.querySelector(".height-1");
let height1 = box1.offsetHeight;
/* Get height of the second div with id="books" */
let box2 = document.querySelector(".height-2");
let height2 = box2.offsetHeight;
/* Append values to the array */
myArray.push(height1, height2);
/* Extract the highest value from the array */
let highestValue = Math.max(...myArray);
/* Set height of all divs with id="books" equal to the highest value */
document.querySelector(".height-1").style.height = highestValue "px";
document.querySelector(".height-2").style.height = highestValue "px";
</script>
</body>
</html>