Sorry for replying to an old comment, but hopefully I can help others who might come across this!

1) You can add mr-1 as a class for all of your columns. mr-1 means you would set a margin space on the right side of your selected column. So, based on your code, you would have something like <div class="card col-1 p-1 mr-1">col-1</div> The downside to this is that you run the risk of your row of columns breaking into a new line.

Which brings us to the second option!

2) You can leave the columns as is, but you would remove card from the column's class while leaving p-1 in your original code. You would then add another <div> with the card and p-1 classes within the column. So, based on your code, you would get something like <div class="col-1 p-1"><div class="card p-1">col-1</div></div>

The only downside is that it's more code to add and your columns get slightly thinner, but at least all of them will stay in the same row:

Putting spaces between columns can depend on what you want for your columns in a row, so be sure to experiment and see what works for you and how you want your layout to look. I hope this helps!