bootstrap-vue/src/components/layout/fixtures/col.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">
    <div class="container">
        <div class="row">
            <b-col ref="basic">
                <h1>Hello Vue!</h1>
            </b-col>
            <b-col v-for="size in sizes"
                   :key="`cols-${size}`"
                   :cols="size"
                   ref="cols"></b-col>
            <b-col v-for="size in sizes"
                   :key="`offset-${size}`"
                   :offset="size"
                   ref="offset"></b-col>
            <b-col v-for="size in sizes"
                   :key="`order-${size}`"
                   :order="size"
                   ref="order"></b-col>
            <b-col v-for="breakpoint in breakpointObjs"
                   :key="`boolean-${breakpoint.key}`"
                   v-bind="breakpoint"
                   ref="boolean-breakpoints"></b-col>
            <b-col sm
                   ref="sm"></b-col>
            <b-col md
                   ref="md"></b-col>
            <b-col lg
                   ref="lg"></b-col>
            <b-col xl
                   ref="xl"></b-col>
            <div v-for="breakpoint in breakpoints">
                <b-col v-for="size in sizes"
                       v-bind="{[breakpoint]: size,[`offset-${breakpoint}`]: size,[`order-${breakpoint}`]: size}"
                       :key="`${breakpoint}-${size}`"
                       :ref="`multi-${breakpoint}`"></b-col>
            </div>
            <b-col tag="section"
                   ref="tag"></b-col>
            <b-col align-self="center" ref="alignSelf"></b-col>
        </div>
    </div>
</div>