I'm currently working on integrating VueJs and bootstrap4 to create two basic components. However, I am facing an issue where I have assigned the class .col-md-4 to a div in order to add 3 elements per row, but only one element is being added per row instead.
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>
This is the current result:
https://i.sstatic.net/sJmeJ.png
This is what I want to achieve:
https://i.sstatic.net/ssoA1.png
Why might this issue be occurring?
Below is the full HTML code:
<div class="container">
<div class="row">
<MainBarber></MainBarber>
</div>
</div>