"Responsive List groups for ratings "
Bootstrap 3.1.0 Snippet by maridlcrmn

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="well"> <h1 class="text-center">Vote for your favorite</h1> <div class="list-group"> <a href="#" class="list-group-item active"> <div class="media col-md-3"> <figure class="pull-left"> <img class="media-object img-rounded img-responsive" src="http://placehold.it/350x250" alt="placehold.it/350x250" > </figure> </div> <div class="col-md-6"> <h4 class="list-group-item-heading"> List group heading </h4> <p class="list-group-item-text"> Qui diam libris ei, vidisse incorrupte at mel. His euismod salutandi dissentiunt eu. Habeo offendit ea mea. Nostro blandit sea ea, viris timeam molestiae an has. At nisl platonem eum. Vel et nonumy gubergren, ad has tota facilis probatus. Ea legere legimus tibique cum, sale tantas vim ea, eu vivendo expetendis vim. Voluptua vituperatoribus et mel, ius no elitr deserunt mediocrem. Mea facilisi torquatos ad. </p> </div> <div class="col-md-3 text-center"> <h2> 14240 <small> votes </small></h2> <button type="button" class="btn btn-default btn-lg btn-block"> Vote Now! </button> <div class="stars"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p> Average 4.5 <small> / </small> 5 </p> </div> </a> <a href="#" class="list-group-item"> <div class="media col-md-3"> <figure class="pull-left"> <img class="media-object img-rounded img-responsive" src="http://placehold.it/350x250" alt="placehold.it/350x250" > </figure> </div> <div class="col-md-6"> <h4 class="list-group-item-heading"> List group heading </h4> <p class="list-group-item-text"> Eu eum corpora torquatos, ne postea constituto mea, quo tale lorem facer no. Ut sed odio appetere partiendo, quo meliore salutandi ex. Vix an sanctus vivendo, sed vocibus accumsan petentium ea. Sed integre saperet at, no nec debet erant, quo dico incorrupte comprehensam ut. Et minimum consulatu ius, an dolores iracundia est, oportere vituperata interpretaris sea an. Sed id error quando indoctum, mel suas saperet at. </p> </div> <div class="col-md-3 text-center"> <h2> 12424 <small> votes </small></h2> <button type="button" class="btn btn-primary btn-lg btn-block">Vote Now!</button> <div class="stars"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p> Average 3.9 <small> / </small> 5 </p> </div> </a> <a href="#" class="list-group-item"> <div class="media col-md-3"> <figure class="pull-left"> <img class="media-object img-rounded img-responsive" src="http://placehold.it/350x250" alt="placehold.it/350x250"> </figure> </div> <div class="col-md-6"> <h4 class="list-group-item-heading"> List group heading </h4> <p class="list-group-item-text"> Ut mea viris eripuit theophrastus, cu ponderum accusata consequuntur cum. Suas quaestio cotidieque pro ea. Nam nihil persecuti philosophia id, nam quot populo ea. Falli urbanitas ei pri, eu est enim volumus, mei no volutpat periculis. Est errem iudicabit cu. At usu vocibus officiis, ad ius eros tibique appellantur. </p> </div> <div class="col-md-3 text-center"> <h2> 13540 <small> votes </small></h2> <button type="button" class="btn btn-primary btn-lg btn-block">Vote Now!</button> <div class="stars"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p> Average 4.1 <small> / </small> 5 </p> </div> </a> </div> </div> </div> </div>
a.list-group-item { height:auto; min-height:220px; } a.list-group-item.active small { color:#fff; } .stars { margin:20px auto 1px; }

Related: See More


Questions / Comments:

@maridlcrmn http://bootsnipp.com/mouse0... - should fix the issues with Firefox and webkit browsers. I also removed the need for setting minimum height by adding 'class="clearfix"' to the bottom of each element, they should be the exact size they need to be.

mouse0270 () - 10 years ago - Reply 0


I guess from what I've read, this is a specific bug with Firefox interacting w/ bootstrap. You can add col-xs-12 to the img class or make your own class to give the image 100% width (that's the property it's missing supposedly, it only has max-width: 100%). However, having either of these added to fix it by default seems to disturb the display in Chrome. What you could do (there might be an alternative or an easier way) is use javascript to add on the width attribute to the images if it detects Firefox as the browser.

This bit of code should work. Be aware that this will add it to all images on the page (made it trying to get this to display properly) - if you want to add it to specific images you might give them an empty class or something and use getElementsByClassName instead of TagName.

$(window).load(function() {
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
var imgList = document.getElementsByTagName("img");
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.width = "100%";
}
}
});

This loads all of the images into an array and loops until they are all appended (if Firefox is detected, otherwise nothing will change). Anyone who wants to add onto or offer an alternative solution, feel free

Dustin Lorenz () - 10 years ago - Reply 0


Looks great in Webkit Browsers. But very messed up in FireFox.

Jade () - 10 years ago - Reply 0


In FF looks bad.

evpadallas () - 10 years ago - Reply 0