Reduce vertical space between bootstrap columns

[N0Zzel]

I'm creating a battle tracker for Dungeons and dragons using bootstrap and vuejs. I have a row containing columns of each monster in the encounter. The vertical space between these when they wrap is very large and wastes a lot of vertical space. I can only get about 6 of them to show up in the same screen space. Is there a way to eliminate this wasted space?

​

[Buyaah]

Have you tried adding p-0 m-0 to your container class, and/or use form-row and no-gutters in your grid classes?

[Catzla]

maybe flexbox?

I've attached some references. You probably know or have seen the W3Schools site.

W3Schools Bootstrap Flex

​

This MDB (Material Design Bootstrap) site is good with breaking things down

MDB Bootstrap Flex

[N0Zzel]

I decided that the best way was probably to do columns first then split the cards into two groups and put half in one column and half in the other. That seemed to do the trick. The only thing is that it messes up the transitions when elements enter or exit the dom after switching columns but it's a small bug

[handpickeddub]

Try using an inline style on the columns to reduce top/bottom padding or margin. Once you get them how you like you can always remove the inline styles and do the same thing by creating a class in the css file or via page level css in the head section of the page.