I'm using latest Bootstrap 3.0 RC1 and trying to build an image overview with responsiveness and multiple break points when the images becomes too small (like seen on Dribbble).
Issues:
I hope someone can help me out, I'm a beginner to building responsive stuff..
Best regards
Link to jsfiddle:
http://jsfiddle.net/6dckB/ (your browser must be wide to see the effects)
HTML:
<div class="container">
<ul class="row-fluid">
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
<li class="group">
<div class="img-thumbnail">
<a href="#">
<img src="http://placehold.it/350x150" style="width:100%;">
</a>
</div>
</li>
</ul>
</div>
CSS:
.row-fluid {
padding-left: 0;
list-style: none;
}
.row-fluid:before,
.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
.row-fluid:before,
.row-fluid:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.row-fluid:after {
clear: both;
}
@media (min-width: 768px) {
.row-fluid {
margin-left: -10px;
margin-right: -10px;
}
}
.row-fluid .row {
margin-left: -10px;
margin-right: -10px;
}
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 50%;
margin-bottom: 20px;
}
@media (max-width: 400px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 100%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 33.33333333333333%;
}
}
@media (min-width: 992px) {
.row-fluid .group {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
width: 25%;
}
}
It doesn't appear that you are using Bootstrap 3 RC1. The link in your fiddle is broken. Bootstrap RC1 doesn't have .row-fluid
anymore.
You could just simplify everything by letting the responsive features in 3 do the work for you. BS3 now has 3 grid sizes -- tiny, small and large that are used to manipulate display on different devices / widths. You could do something like this..
<div class="row">
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-lg-3 col-sm-4 col-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
...
</div>
That will get you..
col-lg-3
)col-sm-4
)col-6
)Demo: http://bootply.com/70929