Lightbox/Bootstrap - HR started jumping above content

I created a Bootstrap Thumbnail image grid originally and the HR would instantly jump below all of the images.

I decided to delete the Bootstrap image grid and change it to a Lightbox image grid which is so much better.

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.

Is this something to do with the pre-set CSS configuration within Lightbox?


<div class="container lightbox">     <div class="gallery">         <div class="row row1">             <div class="col-md-3">                 <a href="Pictures/Pic1.jpg" data-title="Picture #1" data-lightbox="Picture Number 1">                     <img src="Pictures/Pic1.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic6.jpg" data-title="Picture #2" data-lightbox="Picture Number 2">                     <img src="Pictures/Pic6.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic7.jpg" data-title="Picture #3" data-lightbox="Picture Number 3">                     <img src="Pictures/Pic7.jpg" width="200px" class="img-thumbnail">                 </a>             </div>         </div>           <div class="row row2">             <div class="col-md-3">                 <a href="Pictures/Pic4.jpg" data-title="Picture #4" data-lightbox="Picture Number 4">                     <img src="Pictures/Pic4.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic5.jpg" data-title="Picture #5" data-lightbox="Picture Number 5">                     <img src="Pictures/Pic5.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic2.jpg" data-title="Picture #6" data-lightbox="Picture Number 6">                     <img src="Pictures/Pic2.jpg" width="200px" class="img-thumbnail">                 </a>             </div>         </div>           <div class="row row3">             <div class="col-md-3">                 <a href="Pictures/Pic3.jpg" data-title="Picture #7" data-lightbox="Picture Number 7">                     <img src="Pictures/Pic3.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic8.jpg" data-title="Picture #8" data-lightbox="Picture Number 8">                     <img src="Pictures/Pic8.jpg" width="200px" class="img-thumbnail">                 </a>             </div>             <div class="col-md-3">                 <a href="Pictures/Pic9.jpg" data-title="Picture #9" data-lightbox="Picture Number 9">                     <img src="Pictures/Pic9.jpg" width="200px" class="img-thumbnail">                 </a>             </div>         </div>     </div> </div>         <hr class="bigHR2"> 

Very basic custom CSS :

.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%; } 

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.

Lightbox/Bootstrap - HR started jumping above content


Category: html Time: 2016-01-26 Views: 2

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 0.111 (s). 12 q(s)