bootstrap vue dropdown no styling

Question

Looking at the docs

https://bootstrap-vue.org/docs/components/dropdown#button-content

I made an example that uses b-dropdown:

https://codesandbox.io/s/6lhk6?file=/src/components/GenericItem.vue

but in the component,

<template>
     <div>
      <b-dropdown id="dropdown-1" text="Item or Category" class="m-md-2">
        <b-dropdown-item>Edit Name</b-dropdown-item>
        <b-dropdown-item>Delete</b-dropdown-item>
      </b-dropdown>
    </div>
</template>

renders as:

Why isn't styling applied?

Answer 1

It's really nice how no warnings are given about bootstrap not being imported;

Fixed by adding:

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

to main.js

import Vue from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.config.productionTip = false;


new Vue({
  render: h => h(App)
}).$mount("#app");