I recently made an image gallery page on my website using Bootstrap 3 and Fancybox 3. My active page is located here. http://rye03870.com/photos.html The gallery looks how I want it to but when you click an image, the Fancybox doesn't work.
<div class="container">
<h1>Photos</h1>
<div class="row">
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/1.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/1.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/2.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/2.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/3.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/3.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/4.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/4.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/5.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/5.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/6.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/6.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/7.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/7.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/8.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/8.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/9.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/9.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/10.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/10.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/11.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/11.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/12.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/12.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/13.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/13.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/14.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/14.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/15.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/15.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/16.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/16.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/17.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/17.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/18.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/18.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/19.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/19.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/20.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/20.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/21.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/21.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/22.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/22.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/23.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/23.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/24.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/24.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/25.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/25.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/26.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/26.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/27.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/27.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/28.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/28.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/29.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/29.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/30.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/30.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/31.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/31.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/32.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/32.jpg" /> </div>
</a>
</div><div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/33.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/33.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/34.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/34.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/35.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/35.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/36.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/36.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/37.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/37.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/38.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/38.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/39.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/39.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/40.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/40.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/41.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/41.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/42.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/42.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/43.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/43.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/44.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/44.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/45.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/45.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/46.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/46.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/47.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/47.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/48.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/48.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/49.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/49.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/50.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/50.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/51.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/51.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/52.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/52.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/53.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/53.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/54.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/54.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/55.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/55.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/56.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/56.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/57.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/57.jpg" /> </div>
</a>
</div>
<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3 filter bunarske">
<a class="thumbnail fancybox" data-fancybox="images" href="images/58.jpg">
<div class="img-fixed">
<img class="img-responsive" alt="" src="images/58.jpg" /> </div>
</a>
</div>
</div></div>
<div class="clearfix"></div>
(Posted on behalf of the OP).
This is solved, I had the wrong link for the css.
Related
I'm having some trouble formatting text properly inside rows.
Here's what I've got so far:
And the code which produces that result:
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Top Text</strong>
<p>Bottom Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Boreal Text</strong>
<p>Austral Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
<div class="row justify-content-center py-lg-4">
<div class="col-circle-width order-lg-2">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-1 main-text-right">
<div class="text-center text-sm-left text-lg-right">
<strong>Septentrional Text</strong>
<p>Meridional Text</p>
</div>
</div>
<div class="col-circle-width d-none d-lg-block order-lg-3"></div>
<div class="w-100 d-lg-none p-3"></div>
<div class="col-circle-width order-lg-4">
<i class="icon-heart large-circle-dati"></i>
</div>
<div class="w-100 d-block d-sm-none"></div>
<div class="col-auto col-lg-3 order-lg-5 main-text-left">
<div class="text-center text-sm-left">
<strong>Northern Text</strong>
<p>Southern Text</p>
</div>
</div>
<div class="w-100 d-lg-none p-3"></div>
</div>
I've been trying to get the text to the left to be aligned with the icons - as displayed on the columns on the right - but can't seem to get it to work. Any help would be appreciated! Thank you in advance!
I'm trying to center some generated thumbnail in a row. The problem is that I don't know the number of thumbnail I will get so... I need a flexible solution... I tried with the center-block class, but this isn't working.
Here is a snippet available to show an exemple of my problem (try to center the 4th thumbnail under the first row) :
http://www.bootply.com/663prFgvlL
And my HTML below :
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-5/">
<img class="img-portfolio img-responsive" title="MDL 5" src="/media/photologue/photos/cache/MDL_6_thumbnail.jpg" alt="portfolio MDL 5">
</a>
<div class="mask">
<h4>MDL 5</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:53</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-4/">
<img class="img-portfolio img-responsive" title="MDL 4" src="/media/photologue/photos/cache/MDL_5_thumbnail.jpg" alt="portfolio MDL 4">
</a>
<div class="mask">
<h4>MDL 4</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:52</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-3/">
<img class="img-portfolio img-responsive" title="MDL 3" src="/media/photologue/photos/cache/MDL_4_thumbnail.jpg" alt="portfolio MDL 3">
</a>
<div class="mask">
<h4>MDL 3</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-2/">
<img class="img-portfolio img-responsive" title="MDL 2" src="/media/photologue/photos/cache/MDL_3_thumbnail.jpg" alt="portfolio MDL 2">
</a>
<div class="mask">
<h4>MDL 2</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:51</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/mdl-1/">
<img class="img-portfolio img-responsive" title="MDL 1" src="/media/photologue/photos/cache/MDL_1_thumbnail.jpg" alt="portfolio MDL 1">
</a>
<div class="mask">
<h4>MDL 1</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 thumb">
<div class="view view-first">
<a href="/photologue/photo/plan-mdl/">
<img class="img-portfolio img-responsive" title="Plan MDL" src="/media/photologue/photos/cache/Plan_amenagement_couleurs_thumbnail.jpg" alt="portfolio Plan MDL">
</a>
<div class="mask">
<h4>Plan MDL</h4>
<p class="muted"><small>Publiée le 13 avril 2016 16:50</small></p>
</div>
</div>
</div>
I'm looking to center only the last thumb on the grid... I think this is pretty simple, but... I'm stuck... !
Thanks in advance for your help !
Ok, I should try to search a little bit more before asking.... !
Got my answer here :
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns
Only have to :
<div class="container">
<div class="row row-centered">
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
</div>
</div>
And CSS :
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks
demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>
I am building my first site with bootstrap. it is going pretty good so far.
The only problem I haven't been able to fix is:
The bootstrap carousel is sliding to far. I have 3 items in carousel each has 5 pictures.
If I press the back button repeatedly (doesn't mather how many times), the carousel cycles trough the 3 items no problem.
but if I press the next button repeatedlly, after the third times it does not reset to 0.
What could be causing this?
<div class="row">
<div class="col-sm-12 thumb_box">
<div class="thumbs">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row thumb_row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
I found the problem.
If you are having this problem check your div elements.
Something was wrong in my hierarchy of divs.
I am having trouble with rows and columns in Twitter Bootstrap 3. I got 5 images, which are set in 2 rows (3 in 1st row and 2 in 2nd one). They are set as col-lg-4 (3 images in a row).
<div class="row pad3">
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="" />
</a>
</div>
</div>
<div class="row pad3">
<div class="col-lg-4 col-xs-12 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="" />
</a>
</div>
<div class="col-lg-4 col-xs-12 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="" />
</a>
</div>
</div>
I want to achieve that when I reduce my window size, those columns become medium (col-md-6) and the 3rd one "spills" over into the next row. Kinda like on large screen its 3 and 2, on medium its 2-2-1. How do I achieve this? I dont know what to do with my 3rd column because he is still part of the 1st row. Is this done with media queries?
In short, when screen is large i want to have 3 images in a row, when its medium i want to have 2 images in a row and anything less than that its 1 image per row.
Thanks
The dividing row is preventing the columns from wrapping ("spillover"). Try this..
<div class="row pad3">
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="">
</a>
</div>
</div>
Demo: http://bootply.com/93649
Also see: Bootstrap 3 - Use more than 12 columns in a row