Hacking Bootstrap – Vertical Align Bottom for Columns

Posted on Posted in General

Ok, this is a short post about something that took me too long to solve. If you know the height of the tallest item in your row, offset the short one by using padding-top alignment. An absolute hack and will not work for dynamically generated content where you won’t know the height of the content before applying CSS styling.

So what can you do there? Use Javscript to figure out the two heights and apply top padding to force the alignment (while maintaining some semblance of responsiveness). I like this idea better than pure CSS because 1) I like to program and 2) I REALLY don’t want to mess with the CSS of Bootstrap because they obviously know better than me.

There are actually micro libraries out there to help with this too like matchHeight. But again, if you know the absolute height of elements, a little CSS is the best way to go. I wish I could share screenshots of what I am talking about but unfortunately this is a private repository. I may make a codepen or something to share and edit this post in the future.