grid view switcher bootstrap - Free Download Grid View Switcher For Bootstrap Layout System - grid-view.js

Free Download Grid View Switcher For Bootstrap Layout System – grid-view.js

By Posted on

This time I will share jQuery Plugin and tutorial about Grid View Switcher For Bootstrap Layout System – grid-view.js, hope it will help you in programming stack.

grid view switcher bootstrap - Free Download Grid View Switcher For Bootstrap Layout System - grid-view.js
File Size: 6.15 KB
Views Total: 785
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A tiny grid view switcher for Bootstrap that allows the visitor to quickly switch between Compact View (4×3) and Spaced View (3×3) in your Bootstrap powered grid layout.

How to use it:

1. Load the necessary jQuery library (slim build) and Bootstrap framework in the document.

view source
1 <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
2 <script src="/path/to/cdn/jquery.slim.min.js"></script>
3 <script src="/path/to/cdn/bootstrap.min.js"></script>

2. Add the class .gv-card to grid items with the class .col-lg-4 or .col-lg-3.

view source
001 <div class="row">
002   <div class="gv-card col-4 my-4">
003     <div class="card">
004       <img
005         class="card-img-top project-image"
006         src="placeholder-image.png"
007         alt="Some alternate text"
008       />
009       <div class="card-body">
010         <h3 class="card-title">Some title</h3>
011         <p class="card-text">Some sample text</p>
012         <a href="#" class="btn btn-primary">Button</a>
013       </div>
014     </div>
015   </div>
016   <div class="gv-card col-4 my-4">
017     <div class="card">
018       <img
019         class="card-img-top project-image"
020         src="placeholder-image.png"
021         alt="Some alternate text"
022       />
023       <div class="card-body">
024         <h3 class="card-title">Some title</h3>
025         <p class="card-text">Some sample text</p>
026         <a href="#" class="btn btn-primary">Button</a>
027       </div>
028     </div>
029   </div>
030   <div class="gv-card col-4 my-4">
031     <div class="card">
032       <img
033         class="card-img-top project-image"
034         src="placeholder-image.png"
035         alt="Some alternate text"
036       />
037       <div class="card-body">
038         <h3 class="card-title">Some title</h3>
039         <p class="card-text">Some sample text</p>
040         <a href="#" class="btn btn-primary">Button</a>
041       </div>
042     </div>
043   </div>
044   <div class="gv-card col-4 my-4">
045     <div class="card">
046       <img
047         class="card-img-top project-image"
048         src="placeholder-image.png"
049         alt="Some alternate text"
050       />
051       <div class="card-body">
052         <h3 class="card-title">Some title</h3>
053         <p class="card-text">Some sample text</p>
054         <a href="#" class="btn btn-primary">Button</a>
055       </div>
056     </div>
057   </div>
058   <div class="gv-card col-4 my-4">
059     <div class="card">
060       <img
061         class="card-img-top project-image"
062         src="placeholder-image.png"
063         alt="Some alternate text"
064       />
065       <div class="card-body">
066         <h3 class="card-title">Some title</h3>
067         <p class="card-text">Some sample text</p>
068         <a href="#" class="btn btn-primary">Button</a>
069       </div>
070     </div>
071   </div>
072   <div class

Related posts: