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

This is the HTML code for this bootstrap snippet

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

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

This is the CSS code for this bootstrap snippet

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

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;

}
                                    

This is the JS code for this bootstrap snippet

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

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

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 25th 2015, 15:32

Views: 3.8K

Rated 5/5 based on 3 reviews