Skip to main content

Notifications

Power Pages - Design & Build
Suggested answer

Power Pages overrides Bootstrap 5 - why?

(0) ShareShare
ReportReport
Posted on by 100
Apologies for the rant, but I'm frustrated...

Why on earth does Microsoft include Bootstrap 5 in Power Pages and then decimate it? It overrides most of the marvelous Bootstrap features with low quality Power Pages styles and attributes in theme.css, portalbasictheme.css and the positively horrible styles in preform.BootstrapV5.bundle.css. 
 
Why doesn't the Power Pages Style Editor simply update existing Bootstrap CSS variables to customize the look and feel? Instead, it adds the unnecessary, convoluted portalbasictheme.css.
 
Or how Pages Editor inserts flexbox CSS inline, despite the fact that Bootstrap 5 is built on Flexbox and provides every class imaginable. 

It is so frustrating to spend hours undoing all of this awful CSS, in order to let Bootstrap 5 perform using its own styles and variables. 
 
I realize Microsoft want to provide a range of themes for low-code developers to utilize in Power Pages. But not everyone is a low-code developer. Every Power Pages solution we build at the organization where I work includes customized UI styling to suit our clients' brand guidelines and UI standards. I'm sure I am not the only frustrated Power Pages UI developer.
 
For goodness sake, I wish they would use the Bootstrap framework as it is intended, and not as a doormat on which to dump a load of custom CSS overusing the !important tag, ignoring CSS specificity.
 
Understandable for old Power Portals, but Power Pages should have moved past this years ago.
Categories:
  • Jady Profile Picture
    Jady 100 on at
    Power Pages overrides Bootstrap 5 - why?
    Thanks Oliver. It's frustrating to work with Power Pages like you suggest, not touching Bootstrap etc. There are only so many layers of !important you can utilize before it becomes unwieldy. Why Microsoft use such a complicated DOM in Power Pages is beyond me. 
  • Suggested answer
    oliver.rodrigues Profile Picture
    oliver.rodrigues 8,899 on at
    Power Pages overrides Bootstrap 5 - why?
    A best practice here is not never change the bootstrap css file itself, this is to ensure your portal solution supports future updates/upgrades.
    This is also helpful for troubleshooting / reverting changes where needed.
     
    I don't normally use the Portal Themes, but when making my own CSS file I need to apply the !important tag to overwrite it the same way.
     
    Hope this helps.
  • SaiRT14 Profile Picture
    SaiRT14 1,474 on at
    Power Pages overrides Bootstrap 5 - why?
    I agree - Microsoft should avoid overriding critical Bootstrap functionality and instead provide themes as optional add-ons rather than defaults.

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

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #9 Get Recognized…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 143,867

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 64,174

Leaderboard

Featured topics