How to use bootstrap in Custom Visual?

[VivekChadha]

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/bootstrap/dist/css/bootstrap.css"; 

But I am getting the error on compilation.

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---

[VivekChadha]

@dm-p  @lbendlin  @Hariharan_R  @ibarrau 

[dm-p]

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.

[VivekChadha]

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

[dm-p · Accepted solution]

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]

Hey @VivekChadha - did this approach work for you?