How to fix equal column the height problem in bootstrap

Question

I'm new to bootstrap. I'm trying to create a gallery of some amazing arts. But, I'm facing some issues. All of the columns are taking up equal height even though the image isn't that large. How can I remove the extra space?

<div class="container-fluid">
      <div class="row content" id="images">
        <div class="col-md-4">
          <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\bp-miller-f6BffCg5Ymc-unsplash.jpg" alt="" class="img-fluid">
        </div>
      </div>
</div>

this is how I want it to look.

this is the regular behavior of flex/bs4 , look for masonry like layout. https://stackoverflow.com/search?q=%5Bcss%5Dmasonry — G-Cyrillus, Jan 24 '21 at 16:29
More specifically try: https://stackoverflow.com/a/56612217/1533592 — dale landry, Jan 24 '21 at 16:42

score 1 · Answer 1 · answered Jan 24 '21 at 16:54

This can be helpful

<div class="container-fluid">
<div class="row">
    <div class="col-md-6 content" id="images">
        <div class="col-md-12 ">
             <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
    </div>

    <div class="col-md-6 content" >
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div> 
      </div>
</div>

see more on bootstrap grid

How to fix equal column the height problem in bootstrap

1 Answers1