Bootstrap-vue Form File Upload has no styling, but other components have?

6
votes

Using the example presented here: https://bootstrap-vue.js.org/docs/components/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 components, but apparently not b-form-file?

3
javascriptvue.jsbootstrap-vue
Did you ever fix this issue? I'm stuck with the same problem. - DinosaurHunter
Same question here - ucipass
Are you loading the bootstrap-vue/dist/bootstrap-vue.css file into your project? - Troy Morehouse
And also make sure you are using Bootstrap v4.3.1 CSS as well. - Troy Morehouse

3 Answers

1
votes

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

yarn remove bootstrap
yarn add [email protected]
0
votes

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

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[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>
-1
votes

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 components plugin
Vue.use(IconsPlugin)

first download bootstrap.min.css(v4.5) (https://cdn.jsdelivr.net/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!