Bootstrap snippet: Cards panels with thumbnails

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: panel,cards,thumbnail



<hr> <div class="container bootstrap snippet"> <div class="row"> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x250/6495ED"> <div class="caption"> <h4 style="color:#6495ED"><span class="glyphicon glyphicon-th-large"></span>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a href="#" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i></a> <a href="#" class="btn btn-info btn-xs" role="button"><span class="glyphicon glyphicon-thumbs-up"></span>Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x250/FF00FF"> <div class="caption"> <h4 style="color:#FF00FF"><span class="glyphicon glyphicon-th-large"></span>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a href="#" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i></a> <a href="#" class="btn btn-info btn-xs" role="button"><span class="glyphicon glyphicon-thumbs-up"></span>Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x250/00FF00"> <div class="caption"> <h4 style="color:#00FF00"><span class="glyphicon glyphicon-th-large"></span>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a href="#" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i></a> <a href="#" class="btn btn-info btn-xs" role="button"><span class="glyphicon glyphicon-thumbs-up"></span>Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a> </div> </div> </div> <div class="col-xs-18 col-sm-6 col-md-3"> <div class="thumbnail"> <img src="http://placehold.it/500x250/FF4500"> <div class="caption"> <h4 style="color:#FF4500"><span class="glyphicon glyphicon-th-large"></span>Thumbnail label</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, soluta, eligendi doloribus sunt minus amet sit debitis repellat. Consectetur, culpa itaque odio similique suscipit</p> <a href="#" class="btn btn-default btn-xs pull-right" role="button"><i class="glyphicon glyphicon-edit"></i></a> <a href="#" class="btn btn-info btn-xs" role="button"><span class="glyphicon glyphicon-thumbs-up"></span>Button</a> <a href="#" class="btn btn-default btn-xs" role="button">Button</a> </div> </div> </div> </div><!--/row--> </div><!--/container -->
.thumbnail { padding:0; }
Dey-Dey

Cards panels with thumbnails

Dey-Dey
  May 29th 2014, 11:48
2.2K Views