Bootstrap: Too few cards to fill number of .card-columns slightly before break point (leaves blank column)

[NotAnAmbiTurner]

I wrote a detailed question on StackOverflow, to try to make sure this wasn't a "me doing it wrong" thing. I hope it's okay that I post a link here instead of re-typing: http://stackoverflow.com/questions/43271316/bootstrap-4-card-masonry-style-columns-column-numbers-at-breakpoints-blank.

The basic issue is shown in the below screengrabs from Chrome DevTools Version 57.0.2987.133.

The error doesn't appear to be occurring anymore (though it was happening sporadically before as well), and may have been fixed by the addition of:

    -webkit-column-count: #;
    -moz-column-count: #;

to the CSS where the .column-court was altered.

[mdo]

Not seeing any issue on our end now. Guessing this was somehow resolved?

[travhall]

I'm seeing this issue …

… the upper portion is displaying 8 cards w/in card-columns, the lower displays 9

[midzer]

.card-columns are sometimes lil bit buggy. I've experienced same for an image gallery.

@travhall Check out https://github.com/twbs/bootstrap/issues/20321. I hope it lands in a future bootstrap version.

[travhall]

agreed, thanks @midzer, I'll give this a look over!

[warniiiz]

.card-columns is not working properly with .card of the same height. For the second example (with 9 cards), I would tweak the margin of either the first or the last card in order they display smoothly in all the available columns. Customizing the bootstrap CSS like this (considering the default margin-bottom of .card is 0.75rem):

.card-columns .card:first-child {
  margin-bottom: 0.74rem;
}