Here are the references I used:
CoreUI Base Jumbotron
This is how my script looks like:
<template>
<div class="wrapper">
<div class="animated fadeIn">
<b-card>
<b-row v-for="row in formattedClubs">
<b-col v-for="club in row" cols>
<b-jumbotron header="" lead="">
<b-link to="#">
<b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
</b-link>
<b-link href="#" class="card-header-action btn-close">
{{club.description}}
</b-link>
<p>{{club.price}}</p>
<p>{{club.country}}</p>
<div class="text-center my-3">
<b-btn variant="primary">Add</b-btn>
</div>
</b-jumbotron>
</b-col>
</b-row>
</b-card>
</div>
</div>
</template>
<script>
export default {
name: 'jumbotrons',
data () {
return{
clubs: [
{id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
{id:2, description:'liverpool has salah', price:900, country:'england'},
{id:3, description:'mu fans', price:800, country:'england'},
{id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
{id:5, description:'arsenal player', price:600, country:'england'},
{id:6, description:'tottenham in london', price:500, country:'england'},
{id:7, description:'juventus stadium', price:400, country:'italy'},
{id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
{id:9, description:'barcelona in the spain', price:200, country:'spain'},
{id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
]
}
},
computed: {
formattedClubs() {
return this.clubs.reduce((c, n, i) => {
if (i % 5 === 0) c.push([]);
c[c.length - 1].push(n);
return c;
}, []);
}
}
}
</script>
<style scoped>
.jumbotron {
padding: 0.5rem 0.5rem;
}
</style>
The resulting view can be seen in this image: https://i.sstatic.net/EtYlN.png
In the image above, each box has a different height due to varying lengths of descriptions. How can I make all the boxes have the same height despite differences in description length?