Bootstrap framework snippet Simple panel items

This bootstrap framework snippet "Simple panel items" was 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="https://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="https://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="https://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="https://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="https://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="https://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(); });

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.4

Created: Jun 25th 2015, 15:32

Views: 3.2K