Using the example presented here: , I am not provided with the styling that the first "styled" example shows.

Both appear "plain" even though my template is as such:

<template> 
<div>
  <!-- Styled -->
  <b-form-file v-model="file" :state="Boolean(file)" placeholder="Choose a file..."></b-form-file>
  <div class="mt-3">Selected file: {{file && file.name}}</div>

  <!-- Plain mode -->
  <b-form-file v-model="file2" class="mt-3" plain></b-form-file>
  <div class="mt-3">Selected file: {{file2 && file2.name}}</div>
</div>
</template>

I figured I missed loading the css properly. However, copy-pasting other examples from bootstrap-vue works just fine. Buttons are styled with the attached JS events - so that doesn't seem to be the issue.

Why does bootstrap-vue load CSS for other ponents, but apparently not b-form-file?

Using the example presented here: https://bootstrap-vue.js/docs/ponents/form-file , I am not provided with the styling that the first "styled" example shows.

Both appear "plain" even though my template is as such:

<template> 
<div>
  <!-- Styled -->
  <b-form-file v-model="file" :state="Boolean(file)" placeholder="Choose a file..."></b-form-file>
  <div class="mt-3">Selected file: {{file && file.name}}</div>

  <!-- Plain mode -->
  <b-form-file v-model="file2" class="mt-3" plain></b-form-file>
  <div class="mt-3">Selected file: {{file2 && file2.name}}</div>
</div>
</template>

I figured I missed loading the css properly. However, copy-pasting other examples from bootstrap-vue works just fine. Buttons are styled with the attached JS events - so that doesn't seem to be the issue.

Why does bootstrap-vue load CSS for other ponents, but apparently not b-form-file?

• javascript
• vue.js
• bootstrap-vue

Share Improve this question Follow asked Jul 24, 2018 at 7:19 cbllcbll 7,2892929 gold badges7979 silver badges124124 bronze badges 5

• 1 Did you ever fix this issue? I'm stuck with the same problem. – DinosaurHunter Commented Dec 11, 2018 at 14:22
• 1 Same question here – ucipass Commented Jun 15, 2019 at 21:23
• Are you loading the bootstrap-vue/dist/bootstrap-vue.css file into your project? – Troy Morehouse Commented Jul 6, 2019 at 7:08
• 2 And also make sure you are using Bootstrap v4.3.1 CSS as well. – Troy Morehouse Commented Jul 9, 2019 at 7:59
• I had same problem and found that I was using bootstrap 5.x. Downgrading to supported bootstrap 4.x version did help. – Michael S Commented Aug 28, 2021 at 19:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I just solve the same problem by installing the remended version of Bootstrap. The mand in official website will install the latest version of it (5.0.2 at the time I write this) which is inpatible with bootstrap-vue.

yarn remove bootstrap
yarn add [email protected]

This snippet work, just check your bootstrap-vue and bootstrap-vue-css versions with the snippet. Your problem is probably because of and using the older version of b-vue.

new Vue({
  el: "#app",
});

body {
  padding: 2rem
}

<link type="text/css" rel="stylesheet" href="https://unpkg./[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg./[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg./[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg./[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-form-file
      placeholder="Choose a file or drop it here..."
      drop-placeholder="Drop file here..."
    ></b-form-file>
  </div>
</div>

Same question to me, but Im solved now.

the bootstrap-vue doc code sample

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon ponents plugin
Vue.use(IconsPlugin)

first download bootstrap.min.css(v4.5) (https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css) to src/assets/boostrap.min.css

then instead import 'bootstrap/dist/css/bootstrap.css' to import './assets/bootstrap.min.css'

finally It works!