Bootstrap List/Grid View Switcher with jQuery

Plugin Preview

Share this:

How to start using jQuery?
More jQuery Top, Best and New Plugins
Top 100 jQuery Plugins

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

Demo Download

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>	

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.