Fixing uneven columns in Bootstrap 5 grid

180 Views Asked by At

I've been studying web development for 2 months now. Currently tinkering with bootstrap. How do I fix this problem?

I want the 2 columns to be same height but the right columns keeps on overflowing. I assumed that the left column will match the height of the right since its the biggest but that is not the case.

enter image description here

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container mb-5">
  <div class="row overflow-hidden">
    <div class="col-lg-6">
      <div class="row bg-dark pt-2 pb-2 msNewsItemHover">
        <div class="col-lg-2">
          <img src="https://via.placeholder.com/50" class="msNewsItemImg">
        </div>
        
        <div class="col-lg-10">
          <span class="d-block redText fw-bold text-truncate">Mojiken Studios Cyberpunk Visual Novel Divination Out On All Console</span>
          <span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
          <span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i>  08/18/1990</span>
        </div>
      </div>
      
      <div class="row bg-dark pt-2 pb-2 msNewsItemHover">
        <div class="col-lg-2">
          <img src="https://via.placeholder.com/50" class="msNewsItemImg">
        </div>
        <div class="col-lg-10">
          <span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Trailer May Tease a Star Wars Section</span>
          <span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
          <span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i>  08/18/1990</span>
        </div>
      </div>
      
      <div class="row bg-dark pt-2 pb-2 msNewsItemHover">
        <div class="col-lg-2">
          <img src="https://via.placeholder.com/50" class="msNewsItemImg">
        </div>
        <div class="col-lg-10">
          <span class="d-block redText fw-bold text-truncate">Elden Ring: Speedrunner Beats the Game in Less Than 9 Minutes</span>
          <span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
          <span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i>  08/18/1990</span>
        </div>
      </div>
      
      <div class="row bg-dark pt-2 pb-2 msNewsItemHover">
        <div class="col-lg-2">
          <img src="https://via.placeholder.com/50" class="msNewsItemImg">
        </div>
        <div class="col-lg-10">
          <span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Will Use Unreal Engine 5</span>
          <span class="d-block text-light fw-lighter pt-2 text-truncate">Lorem ipsum, dolor sit amet consectetur adipisicing elit. </span>
          <span class="d-block text-light fw-lighter text-truncate"><i class="bi bi-calendar-check"></i>  08/18/1990</span>
        </div>
      </div>
    </div>
    
    <div class="col-lg-6">
      <div class="row bg-dark pt-2 pb-2">
        <img src="https://via.placeholder.com/500" class="img-fluid">
        <span class="d-block redText fw-bold text-truncate">Kingdom Hearts 4 Will Use Unreal Engine 5</span>
        <span class="d-block text-light fw-lighter text-truncate">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eaque obcaecati cumque officia eos nisi, voluptates reiciendis totam! Expedita doloribus enim natus esse fugit harum, quisquam similique laudantium corrupti impedit.</span>
      </div>

0

There are 0 best solutions below