vertical spacing with Bootstrap Vue

Question

I am using

<b-row v-for="reptile in reptiles" :key="reptile.id">
    <b-col>
        {{ reptile.name }} 
    </b-col>

    <b-col>
        <b-button @click="deleteReptile(reptile)" variant="danger" size="sm">
            <i class="fas fa-trash"></i> Trash
        </b-button>
    </b-col>
</b-row>

And I am getting

I want some vertical space between each row. I can think of a half dozen ways of doing it. But I want to know how it should be done?

For the record I am most tempted to put a <br />&nbsp; after the b-button

OR

put it in a table.

Answer 1

I would add some margin on to the bottom of the rows. You can easily achieve this using Bootstrap's spacing classes like mb-1 .. mb-5 (m stands for margin, b stands for bottom, the number is the size of the margin which is defined in Bootstrap):

<b-row class="mb-2" ...>
    ...
</b-row>