0

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/bootstrap@5.1.3/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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
user2393148
  • 21
  • 1
  • 3
  • You have to create an inner div inside `.col` for wrapping inner contents, then add a custom class and set height and width. – nurmdrafi Apr 12 '22 at 16:20
  • 1
    Does this answer your question? [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/a/19695851/1264804) – isherwood Apr 12 '22 at 16:26
  • Also, you can follow [Link](https://getbootstrap.com/docs/5.1/components/card/#grid-cards) examples just search `.h-100 `. – nurmdrafi Apr 12 '22 at 16:27

0 Answers0