why with divs do not stack the div with bootstrap 4

Question

I'm working on two basic components in VueJs and bootstrap4, the problem is that my div I assign the class .col-md-4 so that for each row 3 elements are added but this does not happen, in fact only 1 element is added per row

Main.vue

<template>
    <div class="col-md-12">
        <categoriacard  v-for="cate in categorias"  
                    :categoria=cate :key="cate.id">
        </categoriacard>
    </div>
</template>
<script>
    import categoriacard from './categoria-card';
    export default {
        name : 'MainBarber',
        data(){
            return {
                categorias : []
            }
        },
        components :{
            categoriacard
        },
        mounted(){
            this.getCategorias();
        },
        methods : {
            getCategorias(){
                axios.get('/api/categorias')
                        .then((res)=>{
                    this.categorias = res.data;
                })
            }
        }
    }
</script>

categoria-card.vue

<template>
    <div class="col-md-4 mb-md-0 mb-4 mt-4 ">
        <div class="card card-image"  >
            <div class="text-white text-center justify-content-center rgba-black-strong py-5 px-4 rounded">
                <div>
                    <h6 class="purple-text">
                        <i class="fa fa-pie-chart"></i>
                        <strong>Categoria</strong>
                    </h6>
                    <h3 class="py-3 font-weight-bold">
                        <strong>{{ categoria.nombre }}</strong>
                    </h3>
                    <p class="pb-3 text-center">{{ categoria.descripcion }} </p>
                    <a class="btn btn-success btn-rounded btn-md waves-effect waves-light"><i class="fa fa-clone left"></i>Ver Servicios</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name : 'categoria-card',
        props : ['categoria']
    }
</script>

I currently have this result

what I want is

That could be happening ?

So full HTML is

<div class="container">
   <div class="row">
      <MainBarber></MainBarber>
   </div>
</div>

@ZimSystem are contained in a .row and before by a .container — DarkFenix, Jun 22 '18 at 15:19
@ZimSystem I just saw your related question, and it is indeed necessary to remove the col-md-12 for a .row, thanks — DarkFenix, Jun 22 '18 at 15:27

score 1 · Accepted Answer · answered Jun 22 '18 at 14:59

It seems to work fine when :

replacing col-md4 with col-4 in categoria-card.vue
replacing col-md-12 with row in Main.vue

See the snippet :

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>

</head>
<body>

<div id="app">
  <main2></main2>
</div>

<script>


Vue.component('main2', {
  name : 'MainBarber',
        data(){
            return {
                categorias : []
            }
        },
        mounted(){
            this.getCategorias();
        },
        methods : {
            getCategorias(){
    console.log("categorias");
                this.categorias = [
     {id : 1, nombre : 'Esportivo', descripcion : 'desc1'}, 
     {id : 2, nombre : 'Infos', descripcion : 'desc2'}, 
     {id : 3, nombre : 'Politica', descripcion : 'desc3'},
     {id : 4, nombre : 'Moda', descripcion : 'desc4'}, 
     {id : 5, nombre : 'Cocina', descripcion : 'desc5'}, 
     {id : 6, nombre : 'Casa', descripcion : 'desc6'}     
     ];
            }
        },
  template: `<div class="row">
    <categoria-card  v-for="cate in categorias"  
                    :categoria=cate :key="cate.id">{{cate.id}}
    </categoria-card>
   </div>`

})
Vue.component('categoria-card', {
  name : 'categoria-card',
        props : ['categoria'],
  template: `<div class="col-4">
        <div class="card card-image"  >
            <div class="text-center justify-content-center rgba-black-strong py-5 px-4 rounded">
                <div>
                    <h6 class="purple-text">
                        <i class="fa fa-pie-chart"></i>
                        <strong>Categoria</strong>
                    </h6>
                    <h3 class="py-3 font-weight-bold">
                        <strong>{{ categoria.nombre }}</strong>
                    </h3>
                    <p class="pb-3 text-center">{{ categoria.descripcion }} </p>
                    <a class="btn btn-success btn-rounded btn-md waves-effect waves-light"><i class="fa fa-clone left"></i>Ver Servicios</a>
                </div>
            </div>
        </div>
    </div>`

})

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

</script>




</body>
</html>

why with divs do not stack the div with bootstrap 4

1 Answers1