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

Question

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?

Answer 1

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]