Subscribe on changes!

CSS conflict with bootstrap

avatar
Nov 26th 2021

Version

3.2.23

Steps to reproduce

Vue.createApp{
..
myVariable : false,
..
}
<div class="d-flex flex-row" v-show="myVariable">
    hello world
</div>

What is expected?

Many people use bootstrap. Vue 'v-show' should be superior in logic, and override bootstrap's "display:flex" css. However, bootstrap overrides vue's "display:none" which doesn't seem to be any logical in this case, as obviously VUE's conditional 'should be' superior . Maybe somewhere in vue initilization property we can set 'v-show's to use 'display:none' with !important flag.

avatar
Nov 26th 2021

Please provide a runnable reproduction.

v-show uses inline styles, so it should always have precedence over any classes from bootstrap.

avatar
Nov 26th 2021