Bootstrap List Grid View
A Pen by Ajay Patel on CodePen.
Created
July 24, 2014 09:17
-
-
Save ajaypatelaj/bc749a9d40690c5cef2f to your computer and use it in GitHub Desktop.
A Pen by Ajay Patel.
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
| .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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment