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