noone432423 noone432423 - 22 days ago 11
CSS Question

Bootstrap image gallery grid align issue

I am trying to build this kind i image grid using Bootstrap but I have some issue with understanding how to create the code. Here is an final example. enter image description here

Here is my code until now



.border { border: 1px solid red; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<div class="row">
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
<div class="row">
<div class="col-md-8 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>

<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
</div><!-- container -->




Answer

What you have is a row that has three columns in it. Two of those three columns have one column that have two rows.

Here is a basic example you can build off of.

.gallery .v-spacer {
  margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row gallery">

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>  
  
  </div>
  
  <div class="col-sm-4">
    <img class="img-responsive" src="http://placehold.it/600x830">
  </div>

  <div class="col-sm-4">
  
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400">
      </div>
    </div>
    <div class="row v-spacer">
      <div class="col-sm-12">
        <img class="img-responsive" src="http://placehold.it/600x400/FC0/">
      </div>
    </div>  
  
  </div>

</div>

Notice we continue to use .row and the column classes .col-**-** to maintain proper structure of the grid which use padding and negative margins to create the gutters (space) between the columns and their containers.

Edit You'll have a bit of an issue with the middle image if you try to make it responsive. The middle image will not always line up with the stacked images. This is because the total height of the stacked image columns is two variable heights plus a fixed height. The middle image won't be able to match that 100% because it's always a single variable height and won't be able to match the fixed height that's introduced in the stacked columns.

Comments