title: Stack images one on top of another
body: <p>In bootstrap with the grid system elements are automatically arranged side by side but is there a way to stack elements one on top of another? </p>
  
  <p>I'm trying to create a photo gallery where i'm displaying 4 images,hiding them and triggering each photo with an assigned button.</p>
  
  <p>But because these images are first arranged side by side,every time I show one image and hide the other the frame is being shifted.</p>
  
  <p>Example:
  So if the first image starts at point A the last image ends at point D.</p>
  
  <p>Here is the code that I am using </p>
  
  <pre><code>&lt;script src="jquery/jquery-3.2.1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
     $("#gallerytrigger_1").on('click',function(){
     $("#gallery_1").toggle();
     $("#gallery_2").hide(); 
     $("#gallery_3").hide();
     $("#gallery_4").hide();
  });
  
  $("#gallerytrigger_2").on('click',function(){
     $("#gallery_4").hide();
     $("#gallery_3").hide();  
     $("#gallery_2").toggle(); 
     $("#gallery_1").hide();
  });
  
  $("#gallerytrigger_3").on('click',function(){
     $("#gallery_4").hide(); 
     $("#gallery_3").toggle();
     $("#gallery_2").hide(); 
     $("#gallery_1").hide(); 
  });
  
  $("#gallerytrigger_4").on('click',function(){
     $("#gallery_4").toggle();
     $("#gallery_3").hide(); 
     $("#gallery_2").hide(); 
     $("#gallery_1").hide(); 
  });
  &lt;/script
  
  @foreach($gallerys as $gallery)
  &lt;div class="col-sm-2"&gt;
   &lt;br&gt;
    &lt;div id="gallery_{{$loop-&gt;iteration}}" style="display:none;"&gt;
     &lt;p style="text-align: center;"&gt;&lt;img style="width: 100%;border-radius: 
       6px;" src="/gallery/{{ $gallery-&gt;imagelocation }}"&gt;&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  @endforeach
  
  @foreach($gallerys as $gallery)
  &lt;div class="col-xs-2"&gt;
   &lt;br&gt;
    &lt;div id="gallerytrigger_{{$loop-&gt;iteration}}"&gt;
     &lt;hr&gt;
     &lt;img style="width: 200%;border-radius: 6px;margin-left: -12px;margin- 
      top: -100px;" src="/gallery/{{ $gallery-&gt;imagelocation }}"&gt;
    &lt;/div&gt;    
  &lt;/div&gt;
  @endforeach
  </code></pre>