Forum Discussion
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
The Error is
ERROR in ./style/visual.less
Module build failed (from ../../Users/VCHA/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../Users/VCHA/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/less-loader/dist/cjs.js):
--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
^
Unrecognised input.............
Please let me know how i can use the bootstrap in custom visual?
----Screenshot---
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
5 Replies
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.