Bootstrap snippet: Simple panel items

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: list,products



<div class="container bootstrap snippet"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-primary text-center"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/4/"> </div> <div class="panel-footer"> <span class="label label-primary">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-primary btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-primary btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-primary btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-success"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/5/"> </div> <div class="panel-footer"> <span class="label label-success">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-success btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-success btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-success btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-danger"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/7/"> </div> <div class="panel-footer"> <span class="label label-danger">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-danger btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-danger btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-danger btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-info"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/8/"> </div> <div class="panel-footer"> <span class="label label-info">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-info btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-info btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-info btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-warning"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/9/"> </div> <div class="panel-footer"> <span class="label label-warning">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-warning btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-warning btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-warning btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="panel panel-default"> <div class="panel-body"> <img class="img-responsive img-effect" src="http://lorempixel.com/700/500/food/10/"> </div> <div class="panel-footer"> <span class="label label-default">Product name</span> <span class="pull-right"> <a href="#" class="btn btn-default btn-xs tip" title="Favorite"> <i class="glyphicon glyphicon-heart"></i> </a> <a href="#" class="btn btn-default btn-xs tip" title="Buy"> <i class="glyphicon glyphicon-shopping-cart"></i> </a> <a href="#" class="btn btn-default btn-xs tip" title="Share"> <i class="glyphicon glyphicon-share"></i> </a> </span> </div> </div> </div> </div> </div>
body{margin-top:20px;} .img-effect:hover { opacity:0.9; cursor: pointer; border-radius: 0px; -webkit-transform: scale(1.2, 1.2); -webkit-transition-timing-function: ease-out; -moz-transform: scale(1.2, 1.2); -moz-transition-timing-function: ease-out; -ms-transform: scale(1.20, 1.20); -ms-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition-duration: 500ms; -ms-transition-duration: 500ms; }
$(function(){ $('.tip').tooltip(); });
Dey-Dey

Simple panel items

Dey-Dey
  Jul 30th 2015, 08:38
2.5K Views