Simple panel items

This bootstrap snippet called "Simple panel items" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: list,products

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<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>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

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;

}
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

$(function(){
    $('.tip').tooltip();
});
 

Similar snippets

Bootstrap snippet bs4 project list

bs4 project list

View

Bootstrap snippet bs4 new friends panel

bs4 new friends panel

View

Bootstrap snippet bs4 project grid

bs4 project grid

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 25th 2015, 15:32

Views: 3.9K

Rated 5/5 based on 4 reviews