🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Bootstrap Equal-Height

Documentation

bootstrap-grid-columns

Makes bootstrap columns all the same height for each row!

Have you ever wanted to get the columns in your Bootstrap grid all the same height? Yes, there are solutions for that out there. But did you also want to do this on a per-row basis?

This plugin handles the case where you have a <div class="row">...</div> containing so many columns that they are wrapped in multiple rows. It adjusts the height of each column so that they are the same within their row.

Features

  • Easy to use (just add the class grid-columns to your row)
  • Detects column wrapping and sizes each individueal row
  • Fully responsive
  • Handles mixed column widths

How to Use

  1. Add bootstrap-grid-columns.js to your page

  2. Add the class grid-columns to your rows:

<div class="row grid-columns"> 	<!-- define your rows here --> </div>

Demo Page

See demo.html.

Requirements

jQuery and Bootstrap 3.


You May Also Like