Tiny Equal Height Plugin For Bootstrap Grid System - bootstrap-grid-columns.js

File Size: 4.33 KB
Views Total: 1123
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny Equal Height Plugin For Bootstrap Grid System - bootstrap-grid-columns.js

A very small jQuery plugin for Bootstrap grid system that responsively and automatically equalizes the height of columns row by row. Supports both Bootstrap 3 and Bootstrap 4.

How to use it:

1. Load the jQuery 3 slim library in your Bootstrap project so the page loads faster.

<script src="//code.jquery.com/jquery-3.0.0.slim.min.js"></script>

2. Download and load the jQuery bootstrap-grid-columns.js plugin after jQuery.

<script src="bootstrap-grid-columns.js"></script>

3. Give the class "grid-columns" to every Bootstrap grid row as follows:

<div class="row grid-columns">
  columns here
</div>

4. Done. The plugin will find the tallest column and set the heights to all columns per row.


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