OK, this isn’t exactly the best ask about this topic, but since there are some pretty smart cookies in here, I’ll ask it anyway. Has anyone else found the arbitrary heights of Bootstrap elements to be frustrating their layouts? Normally, I build all of my elements so that they’ll line up on a 12px baseline grid. So the heights of all elements are divisible by a multiple of 12 (2,3,4,6) so that when the pages are complete all of the text eventually lines up on the same baseline, i.e. 18px text with a 24px line-height will eventually come into harmony with a sidebar with 14px text with an 18px line-height (quick example off the top of my head, not necessarily actual nubers). But, Bootstrap’s numbers are, or seem to be, completely arbitrary. A 30px h2 with a line height of 33px will never be on the same baseline as 14px body copy with a line-height of 20px (actually, it’s 19.92px which is totally bonkers).
Is there something I am missing in the way Bootstrap handles text? Seriously, I’d like to know. The whole system was built by people much smarter than myself, so there might be something that I just haven’t grokked yet. If any of you guys, or gals, have run into issues with these seemingly arbitrary number and have any suggestions on how you have dealt with them, I would be most appreciative of any pointers you might offer.