Overlay five columns in Bootstrap 4

I recently needed to overlay columns using Bootstrap 4.

In my case, there were 5 columns (more specifically cards) that needed to merge the order of their layers.

To solve, I defined the basic structure of the columns in html using the class col standard, and in CSS I gave negative horizontal margins so that they "climb" on top of their neighbors.
Using nth-child (odd) and nth-child (even) to toggle layer orders (z-index) in conjunction with the vertical margins, to be misaligned I got the desired result.

You can check here how it was done:

The result is 100% bootstrap compatible and maintains all responsiveness, which in my case looked like this:

Marc Sendra martorell

So, in short. There is no native way in Bootstrap 4 to override the columns, but working with simple custom CSS and using negative margins, you can get really cool, yet responsive results.

Any questions left? Do you need any help? Leave a comment!