title: Lightbox/Bootstrap - HR started jumping above content
body: <p>I created a Bootstrap Thumbnail image grid originally and the HR would instantly jump below all of the images.</p>
  
  <p>I decided to delete the Bootstrap image grid and change it to a Lightbox image grid which is so much better.</p>
  
  <p>I've not got a problem that the HR which should be acting as a Footer HR, is now ignoring all of the pictures and is jumping straight back up to the top of the page.</p>
  
  <p>Is this something to do with the pre-set CSS configuration within Lightbox?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container lightbox"&gt;
      &lt;div class="gallery"&gt;
          &lt;div class="row row1"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic1.jpg" data-title="Picture #1" data-lightbox="Picture Number 1"&gt;
                      &lt;img src="Pictures/Pic1.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic6.jpg" data-title="Picture #2" data-lightbox="Picture Number 2"&gt;
                      &lt;img src="Pictures/Pic6.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic7.jpg" data-title="Picture #3" data-lightbox="Picture Number 3"&gt;
                      &lt;img src="Pictures/Pic7.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="row row2"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic4.jpg" data-title="Picture #4" data-lightbox="Picture Number 4"&gt;
                      &lt;img src="Pictures/Pic4.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic5.jpg" data-title="Picture #5" data-lightbox="Picture Number 5"&gt;
                      &lt;img src="Pictures/Pic5.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic2.jpg" data-title="Picture #6" data-lightbox="Picture Number 6"&gt;
                      &lt;img src="Pictures/Pic2.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="row row3"&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic3.jpg" data-title="Picture #7" data-lightbox="Picture Number 7"&gt;
                      &lt;img src="Pictures/Pic3.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic8.jpg" data-title="Picture #8" data-lightbox="Picture Number 8"&gt;
                      &lt;img src="Pictures/Pic8.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="col-md-3"&gt;
                  &lt;a href="Pictures/Pic9.jpg" data-title="Picture #9" data-lightbox="Picture Number 9"&gt;
                      &lt;img src="Pictures/Pic9.jpg" width="200px" class="img-thumbnail"&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;   
  
  
  
  
  
  &lt;hr class="bigHR2"&gt;
  </code></pre>
  
  <p>Very basic custom CSS :</p>
  
  <pre><code>.bigHR1 {
      background-color: white !important;
      color: white !important;
      border: 2px solid white !important;
      border-radius: 50%;
      height: 1px !important;
      width: 850px !important;
      margin-left: 5%;
      margin-top: -1%;
  }
  
  .row1 {
      margin-top: 50%;
  }
  
  .row2 {
      margin-top: 10%;
  }
  
  .row3 {
      margin-top: 10%;
  }
  </code></pre>
  
  <p>Both Bootstrap and Lightbox are installed LOCALLY, and am having no problem with Bootstrap on other pages of this website, so it must be the Lightbox.</p>
  
  <p><a href="https://i.stack.imgur.com/KG2FR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KG2FR.png" alt="Clipping Problem"></a></p>