[Vuejs]-How to change a global CSS Bootstrap in specific component in Vue.js?

by

0👍

I think you have two ways here:

The better way:

Use a custom class name like class='myCustomAlert' and in your global.css:

.myCustomAlert {
    top: 50px !important;
}

Another way( This one is deprecated but exactly your situation )

Use /deep/ selector:

/deep/ .b-toaster.b-toaster-top-right,
       .b-toaster.b-toaster-top-left,
       .b-toaster.b-toaster-top-center,
       .b-toaster.b-toaster-top-full {
           top: 50px;
       }

I do not recommend using /deep/ selector but it’s good for you to know.

Leave a comment