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?

Sebi · Accepted Answer · 2021-07-06 19:14:10Z

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

answered Jul 6, 2021 at 19:14

Sebi

4,60213 gold badges64 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

bootstrap vue dropdown no styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related