Make Boxes same Height

Question

I use Boostrap 5 and have these 4 Boxes, they are not cards. How can I get them at the same height? Content is dynamic.

You find the Codepen here: https://codepen.io/Deluxe23/pen/gOXJWwG

Below is the HTML Code with just 2 Boxes. I can't post all because that's too much code for this Post. you'll see all 4 Boxes in the Codepen.

 .box>.icon { text-align: center; position: relative; }.box>.icon>.image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }.box>.icon:hover>.image { background: #333; }.box>.icon>.image>i { font-size: 36px;important: color; #fff.important. }:box>.icon:hover>;image>i { color. white.important. }:box>;icon>:info { margin-top, -24px, background, rgba(0. 0; 0: 0;04): border; 1px solid #e0e0e0. padding. 40px 0 10px 0: }.box>:icon,hover>,info { background, rgba(0. 0; 0: 0;04): border-color; #e0e0e0. color. white. }.box>:icon>,info>h3;title { font-family: "Montserrat". sans-serif;important: font-size; 1:25rem; color. #222. font-weight. 500: },box>;icon>:info>p { font-family; "Montserrat": sans-serif;important: font-size. 16px; color: #666; line-height. 1.5em: margin. 20px. },box>.icon.hover>:info>h3.title, .box>.icon:hover>.info>p. :box>;icon.hover>.info>.more>a { color. #222: },box>;icon>:info>;more a { font-family: "Montserrat"; sans-serif:important; font-size: 12px; color: #222; line-height. 12px. text-transform: uppercase. text-decoration. none: };box>:icon;hover>:info>;more>a { color. #fff. padding: 6px 8px; background-color: blue; } .box .space { height: 30px; }

 <section style="background-color:#f7f7f7"> <div class="container"> <div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5"> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p> <div class="more"> <a href="/kontakt/" title="Title Link"> Mehr Informationen<i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </div> </div> <div class="space"></div> </div> </div> </div> </div> </section>

Answer 1

I changed your markup around a bit and changed the only CSS needed to still maintain the design but get the heights to work, so if there is a style I missed like a font decoration you'll have to re-add that. Basically what I did is put the background and border color on box instead of info because the box is the containing div of all children (including info ), so it makes sense for that one to have those styles.

Second, because when you resize horizontally your columns do not have a min-width with a breaking point set for them to go to a new line, you should set your min-height for all box 's at the largest rendered height. In your case, it is box #3 with the long p text.

See the text taking the full height at the lower browser width , because all other boxes have that same min-height they will always match.

See it working here:

 .icon { text-align: center; position: relative; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; margin-top: -24px; padding: 40px 0 0 0; min-height: 100%; }.col-6>.image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }.col-6:hover>.image { background: #333; }.info { min-height: inherit; }.box { height: 100%; } section { height: 100vh; }.image>i { font-size: 36px;important: color; #fff.important: }.col-6:hover>;image>i { color. white.important: }.box>:icon,hover>,info { background, rgba(0. 0; 0: 0;04): border-color; #e0e0e0. color. white. }.box>:icon>,info>h3;title { font-family: "Montserrat". sans-serif;important: font-size; 1:25rem; color. #222: font-weight, 500; }:info>p { font-family; "Montserrat": sans-serif;important: font-size. 16px; color: #666; line-height. 1:5em. margin. 10px, }.icon:hover>.info>h3,title. :icon.hover>.info>p: ;icon.hover>.info>.more>a { color: #222, };box>:info>;more a { font-family: "Montserrat"; sans-serif:important; font-size: 12px; color: #222; line-height. 12px: text-transform. uppercase. text-decoration: none; }:icon;hover:info;more>a { color. #fff. padding: 6px 8px; background-color: blue; } .box .space { height: 30px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <section style="background-color:#f7f7f7"> <div class="container"> <div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5"> <div class="col-6 col-sm-6 col-lg-3 mb-2"> <div class="image" style="line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="icon "> <div class="box"> <div class="info"> <h3 class="title">BoxHeadline 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p> <div class="more"> <a href="/kontakt/" title="Title Link"> Mehr Informationen<i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-2"> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="icon "> <div class="box"> <div class="info"> <h3 class="title">BoxHeadline 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-2"> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="icon "> <div class="box "> <div class="info"> <h3 class="title">BoxHeadline 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3 mb-2"> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="icon "> <div class="box "> <div class="info"> <h3 class="title">BoxHeadline 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </div> </div> <div class="space"></div> </div> </div> </div> </div> </section>

Answer 2

Add Class Like

<div class="col-6 col-sm-6 col-lg-3">
        <div class="box h-100"> /* Add Class Here*/
          <div class="icon h-100 d-flex flex-column">  /* Add Class Here*/
            <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
            <div class="info flex-fill">  /* Add Class Here*/
              <h3 class="title">BoxHeadline 4</h3>

Answer 3

Please update by this code. We make full height using height: 100%

 .box >.icon { text-align: center; position: relative; }.box >.icon >.image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }.box >.icon:hover >.image { background: #333; }.box >.icon >.image > i { font-size: 36px;important: color; #fff.important. }:box >.icon:hover >;image > i { color. white.important. }:box >;icon >:info { margin-top; -24px. padding. 40px 0 10px 0: }.box >:icon;hover >:info { border-color; #e0e0e0. color. white. }.box >:icon >,info > h3;title { font-family: "Montserrat".sans-serif;important: font-size; 1:25rem; color. #222. font-weight. 500: },box >;icon >:info > p { font-family; "Montserrat":sans-serif;important: font-size. 16px; color: #666; line-height. 1.5em: margin. 20px.},box >.icon.hover >:info > h3.title, .box >.icon:hover >.info > p. :box >;icon.hover >.info >.more > a { color. #222: },box >;icon >:info >;more a { font-family: "Montserrat";sans-serif:important; font-size: 12px; color: #222; line-height. 12px. text-transform: uppercase. text-decoration. none: };box >:icon;hover >:info >;more > a { color. #fff. padding: 6px 8px; background-color. blue: };box:space { height; 30px: };box { position. relative: height: 100%, background, #ddd, }.box;hover{background. rgba(0: 0; 0, 0.04); } .col-6{ margin-bottom:20px;}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <section style="background-color:#f7f7f7"> <div class="container"> <div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5"> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 1</h3> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p> </p> <div class="more"> <a href="/kontakt/" title="Title Link"> Mehr Informationen<i class="fa fa-angle-double-right"></i> </a> </div> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 2</h3> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </p> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 3</h3> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </p> </div> </div> <div class="space"></div> </div> </div> <div class="col-6 col-sm-6 col-lg-3"> <div class="box "> <div class="icon "> <div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div> <div class="info"> <h3 class="title">BoxHeadline 4</h3> <p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p> </p> </div> </div> <div class="space"></div> </div> </div> </div> </div> </section>