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

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

How to use it:

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

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<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.

<div class="row">
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
  <div class="gv-card col-4 my-4">
    <div class="card">
      <img
        class="card-img-top project-image"
        src="placeholder-image.png"
        alt="Some alternate text"
      />
      <div class="card-body">
        <h3 class="card-title">Some title</h3>
        <p class="card-text">Some sample text</p>
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
</div>

3. Create the compact view button and spaced view button on the webpage. That's it.

<a type="button" class="grid-3x3" title="Spaced">
  Spaced View
</a>

<a type="button" class="grid-4x3" title="Compact">
  Compact View
</a>

---

This awesome jQuery plugin is developed by AdvaithM26. For more Advanced Usages, please check the demo page or visit the official website.