Why does Bootstrap set the line-height property to 1.428571429?

It based on font-size 14px but I don’t know why does Bootstrap set line-height to this value?

Thank in advance.

It’s set at that ridiculous number in order that the line height is as close to 20px as possible (based on the parent being 14px). It works out at 19.999999…px.

I guess they have done this so that there is less chance of rounding errors because although browsers will round up to 20px they may keep a tally of the rounding differences and apply it over a range. It is quite noticeable in Firefox if you change the fractions that you see the line-height change even though they should still be rounded up to 20px. Of course the unitless line height is passed as a multiplier down to its children so the extra decimal points are again lost when children are of a different font-size so is again rather a pointless approach.

In my opinion this is a flawed approach and any grid that needs 8 - 10 deciimal points to achieve a layout is a flawed approach. The user only has to set their own default font-size anyway and all those decimal points have gone to waste.

You see the same logic errors in their column widths that are set to 8 decimal points and highlights the futility of these grid layouts as they can never really be perfect. There are better ways to create columns that result in no fractional gaps or mismatched elements which is why I never use the bootstrap grid although its other components are quite useful.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.