I try to have something like this with bootstrap 4
with equal size in the height of green rows and red row
<link href="" rel="stylesheet"/> <div> <div> <div><div> <img src="" alt="Responsive image"> </div></div> <div> <div> <div><div> <img src="" alt="Responsive image"> </div></div> <div><div> <img src="" alt="Responsive image"> </div></div> <div><div> <img src="" alt="Responsive image"> </div></div> </div> </div> </div> </div>All images have the same size and are responsive but the problem is I can't get equal size in the height of green rows and red row 1
1 Answer
Use the sizing utility classes...
h-50= height 50%h-100= height 100%
<div> <div> <div> <div> <img src="" alt="Responsive image"> </div> </div> <div> <div> <div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> Or, for an unknown number of child columns, use flexbox and the cols will fill height. See the d-flex flex-column on the row, and h-100 on the child cols.
<div> <div> <div> <div> <img src="" alt="Responsive image"> </div> </div> <div> <div> <div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> 
