Bootstrap 4 usage

(0) Share

Report

Posted on by iwaldman

159

Hi,

I am having a similar issue as in this post https://powerusers.microsoft.com/t5/Power-Apps-Pro-Dev-ISV/React-Kanban-PCF-Bootstrap-4-usage/m-p/604344. where the Breadcrumb navigation is messed up due to Bootstrap CSS.

Scott Durow provided the following answer:

You will need to namespace your bootstrap CSS using the name of your control. The PCF Control top level container is given a class name that is the name of the control - so all CSS rules then need to be namespaced to that class name so that they do not apply to any styles outside of the PCF control container.

Can someone provide me example of how to namespace Bootstrap?

For example, I have this code

// Row
const row1Div = document.createElement('div');
row1Div.setAttribute('class', 'row align-items-center');
this._controlContainer.appendChild(row1Div);

All responses (2)

Answers (1)

iwaldman 159 on at

Like (0)

Report

Re: Bootstrap 4 usage

Hi @v-xida-msft,

I dug deeper after posting and found how to namespace external CSS. Thank you so much for the quick response.

Regards,
Irvin
Verified answer

v-xida-msft on at

Like (0)

Report

Re: Bootstrap 4 usage

Hi @iwaldman ,

Do you want to use Bootstrap in your PCF control?

If you want to namespace the Bootstrap in your PCF control, please check and see if the following blog or video could help in your scenario:

https://formden.com/blog/isolate-bootstrap

https://stackoverflow.com/questions/13966259/how-to-namespace-twitter-bootstrap-so-styles-dont-conflict

Please consider take a try with above solution, check if could help in your scenario.

Regards,