BootstrapVue: create new row after nth item using v-for

I'm trying to create a 5x5 grid in bootstrap-vue with equal width/height squares. I have an object in my data variables with a length of 25.

    data() {
        return { 
            boxes: {
                a0: {
                    isUncovered: false,
                    isMine: false
                },
                a1: {
                    isUncovered: false,
                    isMine: false
                ...
        }
    }

I tried this but it didn't show the boxes at all. The v-for="(box, i) in boxes" works but displays all boxes underneath eachother.

<b-container v-for="(box, i) in boxes">
    <b-row v-if="(box % 5 == 0)">
        <b-col class="field-box" :id="i" @click="placeBet('uncoverBox', i)">
            <div v-if="boxes[i].isUncovered">
                <img v-if="boxes[i].isMine" src="/icon-cross.svg">
                <img v-else src="/icon-diamond.svg">
            </div>
        </b-col>
    </b-row>
</b-container>

What I want: