In bootstrap-vue make responsive listing of items

Question

With bootstrap-vue, I make listing of items and I need to make items in 2 columns in big devices. Looks like

<b-container  fluid="sm" v-for="nextAd in ads" :key="nextAd.id">
        <div style="border: 2px dotted green">
        {{ nextAd.id }}=>{{ nextAd.title }}
            </div>
    </b-container>

But I failed, as I have always items in 1 column. Which way is correct ?

"bootstrap-vue": "^2.1.0"
"vue": "^2.6.10"

Thanks!

score 1 · Accepted Answer · answered Jan 23 '20 at 07:37

You need to utilize bootstraps grid system if you want a responsive list of items.

new Vue({
 el: "#app"
});

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.2.2/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <b-container>
    <b-row>
      <b-col cols="12" sm="6" v-for="i in 10">
        <!-- Only adding this div with a background to highlight the columns -->
        <div class="bg-dark text-white">
          Item {{ i }}
        </div>
      </b-col>
    </b-row>
  </b-container>
</div>

In bootstrap-vue make responsive listing of items

1 Answers1