Search code examples
vuejs2bootstrap-vue

Vue does not recognize bootstrap properties

I'm using bootstrap-vue:

  <b-container fluid="xl">
     <h2>Example</h2>
  </b-container>

When using a "fluid" prop, Vue.js gives me a warning in the console:

[Vue warning]: Invalid prop: Type check failed for "fluid" prop. Boolean expected, got String with value "xl".

In bootstrap-vue documentation the "fluid" prop is known to be valid.

How to make Vue.js recognize bootstrap props without generating warnings?

Solution

  • I think you are getting this error because you might be using an older version of bootstrap-vue.
    You should update your bootstrap-vue to 2.2.0 or newer (2.23.1 is the latest at the time of my answer).
    There might be breaking changes between the version you are using and the newest but it will be better for you in the end and you will be able to use the fluid prop as a string (as stated in the documentation).