Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
3 years ago
Solved

How to use bootstrap in Custom Visual?

I was trying to use the bootstrap for custom visual, but getting some error, the steps i did are 1- npm install bootstrap 2- using this line in visual.less @import (less) "../node_modules/bootstr...
General Comment
Need Help
Tips and Tricks
  • dm-p's avatar
    dm-p
    3 years ago

    Apologies - looks like Bootstrap 5 has some breaking changes from 4 (I haven't used it for a while in custom visuals).

    It should work if you don't want to use less mixins (i.e. omit the (less) prefix). Using this in my visual.less works for me:

    @import "~bootstrap/dist/css/bootstrap.css";

    This seems to compile through webpack:

    And, the classes are availabe in my visual's DOM:

    Hopefully this should work for you too.

    Good luck,

    Daniel

dm-p's avatar
dm-p
Super User
3 years ago

Add bootstrap.css as an import directly in your visual.ts (I usually place it underneath the visual.less import). Bootstrap does not work with less.

Anonymous's avatar
Anonymous
Not applicable
3 years ago

Same issue is coming up even if i put the import in visual.ts

 

  • dm-p's avatar
    dm-p
    Super User
    3 years ago

    Apologies - looks like Bootstrap 5 has some breaking changes from 4 (I haven't used it for a while in custom visuals).

    It should work if you don't want to use less mixins (i.e. omit the (less) prefix). Using this in my visual.less works for me:

    @import "~bootstrap/dist/css/bootstrap.css";

    This seems to compile through webpack:

    And, the classes are availabe in my visual's DOM:

    Hopefully this should work for you too.

    Good luck,

    Daniel

    • dm-p's avatar
      dm-p
      Super User
      3 years ago

      Hey Anonymous - did this approach work for you?