CODEWITHSUNDEEP
cssvue.jsbootstrap-4vue-componentbootstrap-vue
Dimas Prayoga
Dimas Prayoga

Reputation: 47

Bootstrap b-card in b-card

I've case on Card class bootstrap, Here I want to make 1 parent card and 4 child card (in parent card) and make them 6 column every 1 child card, but when I make 4 child card with col-xl-6 then the other child card make new line. I want to make the child card using grid bootstrap column. Here my code

template

<b-card class="card-congratulation-medal bg-rts-main row">
  <h5 class="text-white col-xl-12">
    Selamat Siang,<br>
    {{ user.nama }} ({{user.kode}})
  </h5>
  <b-card class="p-0 col-xl-3 col-md-3 mt-2" v-for="(item, index) in cardItem" :key="index">
    <h5>{{ item.title }}</h5>
  </b-card>
</b-card>

data()

cardItem: [
  {
    title: "Point",
    icon: "asem"
  },
  {
    title: "Invoice Unpaid",
    icon: "asem"
  },
  {
    title: "Resi",
    icon: "asem"
  },
  {
    title: "Goods",
    icon: "asem"
  },
]

the result of my case here : My Case

I want to make like that, 6 column every .card : My expetation

My element : enter image description here

Upvotes: 1

Views: 560

Answers (2)

Dan
Dan

Reputation: 63099

Wrap the v-for in <b-row>:

<b-card class="card-congratulation-medal bg-rts-main row">
  <h5 class="text-white col-xl-12">
    Selamat Siang,<br>
    {{ user.nama }} ({{user.kode}})
  </h5>

  <b-row cols="2">
    <b-col v-for="(item, index) in cardItem" :key="index">
      <b-card class="p-0 mt-2">
        <h5>{{ item.title }}</h5>
      </b-card>
    </b-col>
  </b-row>

</b-card>

Here is a demo

From comments: When importing plugins instead of the whole library, make sure to import the LayoutPlugin (for <b-row> and <b-col>) and CardPlugin for <b-card>:

import { LayoutPlugin, CardPlugin } from 'bootstrap-vue'

Vue.use(LayoutPlugin);
Vue.use(CardPlugin);

Upvotes: 0

mahan
mahan

Reputation: 14985

You do it like this in bootstrap.

How make Bootstrap 4 card decks same width each row?

You need to use the .card in a .col-xl-6 which is a descendant of a .row.

  <b-row>
    <b-col class="col-xl-6" v-for="(item, index) in cardItem" :key="index">
      <b-card class="p-0 mt-2" >
        <h5>{{ item.title }}</h5>
      </b-card>
    </b-col>
  </b-row>

https://codesandbox.io/s/1w8tf

Upvotes: 1

Related Questions