Bootstrap List Grid View
A Pen by Ajay Patel on CodePen.
Created
January 29, 2018 08:13
-
-
Save brainyfarm/0a4c46ce2a7f797f3452d160fe82c017 to your computer and use it in GitHub Desktop.
Bootstrap List Grid View
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="well well-sm"> | |
| <strong>Display</strong> | |
| <div class="btn-group"> | |
| <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"> | |
| </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span | |
| class="glyphicon glyphicon-th"></span>Grid</a> | |
| </div> | |
| </div> | |
| <div id="products" class="row list-group"> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="item col-xs-4 col-lg-4"> | |
| <div class="thumbnail"> | |
| <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> | |
| <div class="caption"> | |
| <h4 class="group inner list-group-item-heading"> | |
| Product title</h4> | |
| <p class="group inner list-group-item-text"> | |
| Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, | |
| sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> | |
| <div class="row"> | |
| <div class="col-xs-12 col-md-6"> | |
| <p class="lead"> | |
| $21.000</p> | |
| </div> | |
| <div class="col-xs-12 col-md-6"> | |
| <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');}); | |
| $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');}); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .glyphicon { margin-right:5px; } | |
| .thumbnail | |
| { | |
| margin-bottom: 20px; | |
| padding: 0px; | |
| -webkit-border-radius: 0px; | |
| -moz-border-radius: 0px; | |
| border-radius: 0px; | |
| } | |
| .item.list-group-item | |
| { | |
| float: none; | |
| width: 100%; | |
| background-color: #fff; | |
| margin-bottom: 10px; | |
| } | |
| .item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover | |
| { | |
| background: #428bca; | |
| } | |
| .item.list-group-item .list-group-image | |
| { | |
| margin-right: 10px; | |
| } | |
| .item.list-group-item .thumbnail | |
| { | |
| margin-bottom: 0px; | |
| } | |
| .item.list-group-item .caption | |
| { | |
| padding: 9px 9px 0px 9px; | |
| } | |
| .item.list-group-item:nth-of-type(odd) | |
| { | |
| background: #eeeeee; | |
| } | |
| .item.list-group-item:before, .item.list-group-item:after | |
| { | |
| display: table; | |
| content: " "; | |
| } | |
| .item.list-group-item img | |
| { | |
| float: left; | |
| } | |
| .item.list-group-item:after | |
| { | |
| clear: both; | |
| } | |
| .list-group-item-text | |
| { | |
| margin: 0 0 11px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment