Bootstrap List/Grid View Switcher with jQuery
Bootstrap List/Grid View Switcher with jQuery to switch products / posts list and grid view. This light weight jQuery and CSS based plugin toggle the list/grid layout on click event.
Plugin Overview
Plugin: | bootstrap-list-grid-view-switcher |
Author: | Ajay Patel |
Licence: | MIT Licence |
Published: | June 17, 2023 |
Repository: | Fork on CodePen |
Dependencies: | jQuery 2.1.3 or Latest version and Bootstrap 3.2.0 or Latest |
File Type: | zip archive (HTML, CSS & JavaScript) |
Package Size: | 5 KB |
Bootstrap List/Grid View Switcher with jQuery to switch products / posts list and grid view. This light weight jQuery and CSS based plugin toggle the list/grid layout on click event.
How to Use List/Grid View Switcher :
1. Load CSS reset, Bootstrap framework, and jQuery into your web page.
<!--CSS Reset-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!--Bootstrap CSS-->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!--jQuery-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!--Bootstrap JS-->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
2. Also include CSS and Javascript files for list and grid view switcher.
<!--CSS for List/Grid View Switcher-->
<link rel="stylesheet" href="css/style.css">
<!--jQuery for List/Grid View Switcher-->
<script src="js/index.js"></script>
3. Create Bootstrap buttons that will be used to switch list/grid view.
<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>
4. Create HTML structure for products/posts that you want to view in list & grid layout. The following is the single post/product structure, also create others like this.
<div class="container">
<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="https://source.unsplash.com/400x250/?mobile" 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="#1">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
HTML, CSS, JAVASCRIPT, JQUERY