Bootstrap image gallery grid align issue

Question

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.

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 1

can try with below code.

Demo: https://jsfiddle.net/uurzr45k/2/

       <div class="row">

  <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

 <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

 <div class="col-xs-4">
  <div class="row">
  <div class="col-xs-12">
</div>
</div>

</div>

Answer 2

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.

Answer 3

you should follow below grid structure

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

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border">
          1
        </div>
        <div class="col-md-12 border">
          2
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border long">
          3
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-4">
      <div class="row">
        <div class="col-md-12 border">
          4
        </div>
        <div class="col-md-12 border">
          5
        </div>
      </div>
    </div>

  </div>
</div>

see fiddle