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 Example:
See the Pen Bootstrap Equal Height Buttons by Andreas Eracleous ( @Sp00ky ) on CodePen .