diff --git a/docs/guides/bs5migration/index.md b/docs/guides/bs5migration/index.md index 0640c6d480..a6ce6194b8 100644 --- a/docs/guides/bs5migration/index.md +++ b/docs/guides/bs5migration/index.md @@ -38,7 +38,7 @@ Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5. ### Badges -- Badge colour class helpers `.badge-*` have been replaced with background utilities (use `.bg-primary` instead of `.badge-primary`) combined with the corresponding text colour classes (`.text-dark` or `.text-white`) to meet accessibility contrast. +- Badge colour class helpers `.badge-*` have been replaced with background utilities (use `.bg-primary` instead of `.badge-primary`) combined with the corresponding text colour classes (`.text-dark` or `.text-white`) to meet accessibility contrast. Or use the new `.text-bg-*` classes. - The `.badge-pill` class has been replaced with `.rounded-pill` @@ -52,7 +52,7 @@ Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5. ```html -Error badge +Error badge ``` @@ -83,7 +83,7 @@ The `.media` component has been replaced with utility classes.
[...]
-
+
[...]
@@ -735,15 +735,15 @@ As per Bootstrap's migration guide "*Data attributes for all JavaScript plugins This feature can be used to translate old data attributes to their Bootstrap 5 equivalents, allowing existing markup to function without requiring immediate updates. ```js title="Example of bs4-compat silent replacement in amd module" -import initBootstrap4Compatibility from 'theme_boost/bs4-compat'; +import * as BS4compat from 'theme_boost/bs4-compat'; [...] // Init Bootstrap 4 compatibility giving an specific element to look into. -initBootstrap4Compatibility(document.querySelector('[data-region="my-plugin-region"]')); +BS4compat.init(document.querySelector('[data-region="my-plugin-region"]')); // Init Bootstrap 4 compatibility in the entire document. -initBootstrap4Compatibility(); +BS4compat.init(); ``` ```mustache title="Example of bs4-compat silent replacement in a template" @@ -752,11 +752,15 @@ initBootstrap4Compatibility(); {{#js}} // Init Bootstrap 4 compatibility in the entire document. require(['theme_boost/bs4-compat'], function(BS4Compat) { - BS4Compat(); + BS4Compat.init(); }); {{/js}} ``` +```php title="Example of bs4-compat silent replacement in a php file" +$PAGE->requires->js_call_amd('theme_boost/bs4-compat', 'init'); +``` + This will replace for example `data-toggle="tooltip"` with `data-bs-toggle="tooltip"`, or `data-target="#collapsableContent"` with `data-bs-target="#collapsableContent"`. :::warning