Understanding the rem and em CSS units
Bootstrap 4 has switched from px to rem and em wherever possible. This is the main reason why Bootstrap 4 is not supported in IE 8 as IE 8 doesn't support the em and rem units. Bootstrap 4 switched to rem and em because they make responsive typography and component sizing easier.
If you are not familiar with the rem and em CSS units, then it's the right time to learn it.
The em unit is relative to the font size of the parent element. 1em is equal to the current font size of the parent element. 2em means two times the size of the current font. For example, if an element is displayed with a font size of 10 px, then 2em is 20 px. We can achieve responsive typography and components by just changing the parent element's font size using CSS media queries for different viewport or device width sizes.
As em sizing is nested (it depends on parent element), if you have elements with 1.5em sizing and then nest some HTML with elements that also have an em declaration...
