cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
VivekChadha
Frequent Visitor

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/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_0-1663657866685.png

 

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

dmp_0-1663662342835.png

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

dmp_1-1663662400355.png

Hopefully this should work for you too.

Good luck,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

5 REPLIES 5
VivekChadha
Frequent Visitor

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.





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




VivekChadha_0-1663661639002.png

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

 

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:

dmp_0-1663662342835.png

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

dmp_1-1663662400355.png

Hopefully this should work for you too.

Good luck,

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Hey @VivekChadha - did this approach work for you?





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
November 2022 Update

Check it Out!

Click here to read more about the November 2022 updates!

Power BI Dev Camp Session 27

Ted's Dev Camp

This session walks through creating a new Azure AD B2C tenant and configuring it with user flows and custom policies.

Health and Life Sciences Power BI User Group

Health and Life Sciences Power BI User Group

Power BI specialists at Microsoft have created a community user group where customers in the provider, payor, pharma, health solutions, and life science industries can collaborate.