title: Full width Responsive Images Overlap Bootstrap 3
body: <p>I created a grid with col-md-7 on the left and col-md-5 on the right.
  And I put images to the col-md-5, which are responsive and in col-md-12 width - full width</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-7"&gt;LEFT SIDE&lt;/div&gt;
                  &lt;div class="col-md-5"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Demo : <a href="http://jsfiddle.net/r8rFc/298/" rel="nofollow">http://jsfiddle.net/r8rFc/298/</a></p>
  
  <p>It works great without any problems.
  However, I use a menu called Zozo UI tabs. 
  When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other. 
  Thus, it just show the last IMG</p>
  
  <p>I would add the whole code to here but unfortunately it has a lot of dependencies.</p>
  
  <p>Please check from here.</p>
  
  <p>xxx
      </p>
  
  <pre><code>    &lt;!-- Overview --&gt;
      &lt;div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;"&gt;
          &lt;div class="z-content-inner"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-7"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                          LEFT
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-5"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/&gt;
                          &lt;/div&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;                           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Need a way to get that images on the top of each other rather than overlapping.</p>