title: How to fix a white gap after Bootstrap 4 Cards (CSS3 multi-columns bug)(Chrome IE )?
body: <p>I have very annoying bug on Chrome and IE (On Fire Fox it looks fine). I am not really sure what element or elements are doing this.</p>
  
  <p>About the bug:  If you scroll down, you can see where the Bootstrap cards end a big white gap between them and the footer.  </p>
  
  <p><a href="https://i.stack.imgur.com/sfrcm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sfrcm.png" alt="enter image description here"></a></p>
  
  <p>URL where the bug is: I have to remove my URL (Stackoverflow rules...sorry guys)</p>
  
  <p>I have been using Google Chrome Inspect to try to find where the problem is but I did not have luck. That is the reason why I am asking here because I can see where the problem is.</p>
  
  <p>The only clues I have are:
  -   The bug is not in any JS file or in any extern css file, I think there is something in my CSS is doing this. 
  -   It is not the position:relative or the overflow:hidden form the class dtl24, because I have tried to delete them and updated my CSS without them and the bug was still there.</p>
  
  <p>Also, I would like to apologize to you. I have tried to create a snippet with the code but without the images, the bug not appreciable.</p>
  
  <p>Do you know where is the bug and how I could fix it please?</p>
  
  <p>Thanks</p>