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

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?