Plone 6 classic bootstrap clarification

Plone Support Customizing Plone
1

I'm unclear from the wording here Upgrading Plone 5.2 to 6.0 – Backend – Plone Upgrade Guide – Version-specific migration procedures and tips — Plone Documentation v6.0-dev and here What's new in Plone 6 Classic UI – Classic UI — Plone Documentation v6.0-dev if Plone 6 classic actually has bootstrap 5 installed (browser resources available), or if it's just "based" on it in the way the markup is written.

If I want to actually use Bootstrap components like popover, do I need to register those resources separately or are they accessible in vanilla Plone via some class renames or something I'm missing? It looks like the bootstrap mockup for icons doesn't work either, you have to use the iconresolver view?

2

Plone 6 Classic UI delivers all Bootstrap CSS components and a global window.bootstrap where all JS compents are registered. So you can simply try it out by copying some example code from getboostrap.com and paste it into the Editor on 6-classic.demo.plone.org (note: pasting JS isn't allowed though) and it just works.

When it comes to Popovers, the BS documentation says it has to be initialized via JS (because for the 3rd party library popper) so you need to place a JS snipped somewhere in your integration package. Example: Popovers · Bootstrap v5.2 ...

The Icons are registered in the Plone registry and called via @@iconreslover to make them overridable via registry entries. This currently doesn't expose icons via CSS classes but you can paste/use the SVG code anywhere you want.

Note: When pasting SVG code into the Tiny editors source you have to adjust the HTML filtering and add svg and path to the allowed tags and d, fill viewBox to the additional attributes sections. Maybe we should add them to the default allowed settings there.

3 Likes