Search code examples
htmlcsstwitter-bootstrapgridgrid-layout

Bootstrap - make the images inside the column with the same height?

How can I make the images inside the column all having the same height?

I am trying to make a grid layout like this site.

This is my attempt with bootsrap.

But I can't make the heights the same:

enter image description here

Code:

<div class="container">
    <div class="row">

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

    </div>

    <div class="row">

         <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
            <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
            </div>
        </div>

        <div class="col-md-3 col-sm-3">
            <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
            </div>
        </div>

    </div>
</div>

Is it something I need to do it on the image side? If so, what sizes of images that I should comply to?

Or is it something I should to it on javascript side or CSS?

Or a plugin that I should use?

Any ideas?

Solution

  • i made you an example of how you can achieve what you want.

    is by using background-images instead of images. so first you make the columns equal as height, and then use background-images same as the imgs you put in the .grid-items . and you hide the first img with opacity:0 ;

    you need to keep the original imgs so that the grid-items have a physical height

    Let me know if this works for you

    see > jsfiddle

    code used in CSS 

    .grid-item {
    display: block;
    margin: 0 5px;
    border: 1px solid red;
    height:100%;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 0;
    padding-right: 0;
}


.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
  margin:10px 0;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;

}
.row > [class*='col-'] > [class*='col-'] {
  height:100%;
}
a.grid-item img { opacity:0}
a.grid-item { background-size:cover }

.col-md-3 .col-md-12 + .col-md-12 {
  margin-top:10px;
}

    HTML

    <div class="container">
<div class="row">

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

</div>

<div class="row">

     <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

</div>

<div class="row">

    <div class="col-md-6 col-sm-6">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
        <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a>
        </div>
    </div>

    <div class="col-md-3 col-sm-3">
        <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a>
        </div>
    </div>

</div>
</div>