Bootstrap b-card in b-card

Question

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 :

Can you draw and explain the desired output? I am not able to understand the question — Wilson, Mar 11 '21 at 13:37
Hi, Thank you. Here is my expectation : https://i.stack.imgur.com/11gAP.png — Dimas Prayoga, Mar 11 '21 at 13:56
@Wilson here is my trouble : https://i.stack.imgur.com/uo1Ge.png . I want the result is like my expectation — Dimas Prayoga, Mar 11 '21 at 13:57
col-md-6 col-xl-6 col-sm-6... you have to use. then only you will get the desired output. — Wilson, Mar 11 '21 at 14:11

mahan · Answer 1 · 2021-03-11T14:23:36.480

1

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

edited Mar 11 '21 at 14:23

answered Mar 11 '21 at 14:18

mahan

12,366
5
48
83

Dan · Accepted Answer · 2021-03-11T15:02:18.767

0

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);

edited Mar 11 '21 at 15:02

answered Mar 11 '21 at 13:59

Dan

59,490
13
101
110

I also though it would work, I've tried your code with copy paste, but the result of your code : https://imgur.com/a/NDG9YJ2 – Dimas Prayoga Mar 11 '21 at 14:23
Here is a demo of this code working: https://codesandbox.io/s/beautiful-roentgen-2mozj – Dan Mar 11 '21 at 14:28
that working on demo, but I don't know why on my code is didn't work. I think the peru (#d98050) color that's the problem : https://i.stack.imgur.com/Vhd9V.png – Dimas Prayoga Mar 11 '21 at 14:32
is there any other css trick that can solve this peru color area ? – Dimas Prayoga Mar 11 '21 at 14:34
Can you show how you've installed Bootstrap Vue? – Dan Mar 11 '21 at 14:38
"bootstrap": "4.5.2", "bootstrap-vue": "2.21.1", – Dimas Prayoga Mar 11 '21 at 14:40
my ```main.js``` : https://www.protectedtext.com/problem123 password : 123 – Dimas Prayoga Mar 11 '21 at 14:45
1

You need to `import`/`use` the `LayoutPlugin` and `CardPlugin`. You should import all of `BootstrapVue` until you are ready for production and understand the library. – Dan Mar 11 '21 at 14:52

Bootstrap b-card in b-card

2 Answers2