web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Apps
Unanswered

Bootstrap 4 usage

(0) ShareShare
ReportReport
Posted on by 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);

 

 

I have the same question (0)
  • Verified answer
    v-xida-msft Profile Picture
    on at

    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,

  • iwaldman Profile Picture
    159 on at

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 796 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 327 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard