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%;
}
}
Small devices (tablets, 768px and up): @media (min-width: @screen-sm-min) { ... } Medium devices (desktops, 992px and up): @media (min-width: @screen-md-min) { ... } Large devices (large desktops, 1200px and up): @media (min-width: @screen-lg-min) { ... }
Bootstrap 3 used floats to handle the layout in place of the flexbox, however, Bootstrap 4 uses flexbox to handle the layout. The flexbox layout makes it easier to design a flexible responsive layout structure without using float or positioning.
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you're using our source Sass files.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With