Recreating the Bootstrap Table

I recently had a situation where I wanted to use a Bootstrap table style, but be able to expand the row to show additional information. After having difficulty with trying to do this with a Bootstrap table directly, I decided to create my own table matching Bootstrap’s style, because tables were already being used in other places. This turned out to be easier than I originally expected. Using Bootstrap’s built in columns and some custom CSS, we can get the look fairly simply. I also use a tiny bit of jQuery to get a slide toggle effect to show the additional information. Overall it was a fun exercise and I was pleased with the way it turned out.

CodePen:

See the Pen Faux Bootstrap Table by Taylor Hobbs (@TayHobbs) on CodePen.