Make Bootstrap Buttons same height

imageSeptember 25, 2016
Follow me on:

I have wrote a JavaScript function that read all the buttons height through a page and make them to have same height size using jQuery.

How to equal height Javascript function works?

The Javascript function finds all buttons that are inside of this HTML “data-equal-btns” attribute name and then stores all the element button in array.

For example:

Next Javascript retrieves DOM buttons object from array list and go through until find the maximum height number of a button. Based of maximum button height, I calculate the top and bottom padding for each button is needed, in order to be equal with the biggest button.

Button Equal Height Formula:

Extra Padding = (Max Height Button – Current Height Button) / 2

Total Padding Top Button = Current Padding Top Button + Extra Padding

Total Padding Bottom Button = Current Padding Top Button + Extra Padding


See the Pen Bootstrap Equal Height Buttons by Andreas Eracleous (@Sp00ky) on CodePen.