How can I properly format a Vue component?

Question

I would have thought the below would work but it doesn't seem to lay the data out nicely and in a grid like fashion according to this website;

https://bootstrap-vue.org/docs/components/layout

<template>
<div>
    <div v-for="i in items">
        <b-container class="bv-example-row">
            <b-row>
                <b-col>Home</b-col>
                <b-col>Road</b-col>
                <b-col>Home ATS</b-col>
                <div class="w-500"></div>
                <b-col>{{i.Home_Neutral}}</b-col>
                <b-col>{{i.Visitor_Neutral}}</b-col>
                <b-col>{{i.ATS}}</b-col>
            </b-row>
        </b-container>
    </div>
</div>
</template>

Can anyone give me some tips on how I can nicely format this data as it doesn't appear to be working for me? I basically just want to get the data spread out more and into a box like this;

example