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: January 19, 2024
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

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>	

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...