I want to bring my b-card element to the front of an component

Question

I have a b-card component that is delivered with the bootstrapvue framework. But it will not show for some reason. What exactly am i doing wrong?

BlankBody is a component that contains a background that i will use for multiple views.

<template>
<div>
<Header/>
<AppNavigation/>
  <BlankBody>
    <b-card
          title="Card Title"
          img-src="https://picsum.photos/600/300/?image=25"
          img-alt="Image"
          tag="article"
          style="width: 50%; margin-left: 25%;  overflow: visible ;"
          class="mb-1"
  >
      <b-card-text>
          Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </BlankBody>
 </div>
</template>

<script>
import AppNavigation from "../components/AppNavigation";
import Header from "../components/Header";
import BlankBody from "../components/BlankBody";

export default {
components: {
Header,
AppNavigation,
  BlankBody
},
};
</script>

This is how i imported VueBootstrap in main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from './plugins/vuetify';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '@babel/polyfill';

Vue.config.productionTip = false;
Vue.use(BootstrapVue)
new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

And this is my BlankBody component(I know i need to edit this name):

<template>
    <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    </div>
</template>

<script>
    export default {
        name: "BlankBody"
    }
</script>

<style scoped>
</style>

What is does your `blankbody` doing, does it have a `slot`? As your `b-card` is placed within the `blankbody` it should have one — dreijntjens, Oct 29 '19 at 08:51
How are you using BootstrapVue in your project (`Vue.use(...)`, etc)? — Troy Morehouse, Oct 29 '19 at 23:59
@TroyMorehouse i edited the post and it contains my main.js and BlankBody component — Axel, Oct 31 '19 at 09:37
Blank body doesn't render the default slot (which is where your `` is placed. — Troy Morehouse, Oct 31 '19 at 17:26
Also note, `import '@babel/polyfill';` should be placed first in you app entry file — Troy Morehouse, Oct 31 '19 at 20:43

score 0 · Answer 1 · answered Oct 31 '19 at 17:32

0

Your <BlankBody> component doesn't render any content passed to it via the default slot.

Change it to this:

<template>
  <div>
    <v-img :src="require('../assets/background4.png')" width="1920px" height="1080px"></v-img>
    <slot></slot>
  </div>
</template>

answered Oct 31 '19 at 17:32

Troy Morehouse

5,320
1
27
38

I added this slot to my BlankBody component and placed the the b-card between the tags in my page and it renders the card now. Only it renders it under the background instead of the card overlapping it. Is there a guide that explain overlapping elements for vue? – Axel Nov 01 '19 at 15:14
Overlapping is controlled by CSS positioning and z-indexes – Troy Morehouse Nov 01 '19 at 16:41

I want to bring my b-card element to the front of an component

1 Answers1