Varying Heights of Bootstrap Grid Rows

The 6th image has a size of 307*557, while the rest have different sizes. To resolve this, you can either add a fixed number of divs with class “col-*” into a single div with class “row”, or use the jQuery plugin “match height” from the link http://brm.io/jquery-match-height/ and apply the class “–item” to the items you want to have the same height. Check out the demo at http://brm.io/jquery-match-height-demo/. Another solution is to ensure that all the images have the same height or define a uniform height for all the images. The webpage in question is www.mathias-syversen.net.


Question:

My project involves constructing an assortment of images with varying dimensions to create a captivating display. I opted for wider and taller images, which are double the typical size, to prevent any unfilled spaces within the grid and enhance its overall aesthetic appeal.

At present, my layout consists of
my grid
. However, I am struggling to find a way to fill the empty space above the bottom row without having to manually position it. Doing so would be a daunting task, especially to ensure it aligns perfectly on all devices.

Included below is my code along with a Pug (Jade) snippet available on Codepen.

html
  head
    title Grid Test
    link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous")
    link(rel="stylesheet" href="css/style.css" type="text/css")

  body

    div.container-fluid
      div.row
        div.col-xl-6.col-md-6.col-sm-12.col-xs-12.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/600x250/ff0000")
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/00ff00")
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/0000ff")

      div.row
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/0000ff")
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/00ff00")
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/ff0000")
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x500/00ff00")

      div.row
        div.col-xl-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/ff0000")
        div.col-xl-6.col-md-6.col-sm-12.col-xs-12.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/600x250/0000ff")

Any help would be great! Cheers


Solution:

You can give it a shot, although it may not be the optimal solution, it appears to be effective based on my experience.

html
  head
    title Grid Test
    link(href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous")
    link(rel="stylesheet" href="css/style.css" type="text/css")
  body
    div.container-fluid
      div.row
        div.col-lg-6.col-md-6.col-sm-12.col-xs-12.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/600x250/ff0000")
        div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/00ff00")
        div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/0000ff")
      div.row.visible-lg.visible-md.hidden-sm.hidden-xs
       div.col-lg-9.col-md-9.no-gutter    
        div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter
            div.imgContain
              img.responsive(src="http://placehold.it/300x250/0000ff")
        div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/00ff00")
        div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/ff0000")
        div.col-lg-4.col-md-4.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/ff0000")
        div.col-lg-8.col-md-8.col-sm-12.col-xs-12.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/600x250/0000ff")
       div.col-lg-3.col-md-3.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x500/00ff00")
      div.row.hidden-lg.hidden-md.visible-sm.visible-xs
       div.col-sm-12.col-sm-12.no-gutter    
        div.col-sm-6.col-xs-6.no-gutter
            div.imgContain
              img.responsive(src="http://placehold.it/300x250/0000ff")
        div.col-sm-6.col-xs-6.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/300x250/00ff00")
        div.col-sm-12.col-xs-12.no-gutter
          div.col-sm-6.col-xs-6.no-gutter
            div.imgContain
              img.responsive(src="http://placehold.it/300x500/00ff00")
          div.col-sm-6.col-xs-6.no-gutter
            div.col-sm-12.col-xs-12.no-gutter
              div.imgContain
                img.responsive(src="http://placehold.it/300x250/ff0000")
            div.col-sm-12.col-xs-12.no-gutter
              div.imgContain
                img.responsive(src="http://placehold.it/300x250/ff0000")
        div.col-sm-12.col-xs-12.no-gutter
          div.imgContain
            img.responsive(src="http://placehold.it/600x250/0000ff")

Frequently Asked Questions

Posted in Css