Skip to content

[docs] Documentation for MDL-85127 #1319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 14, 2025
Merged

[docs] Documentation for MDL-85127 #1319

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions docs/guides/bs5migration/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`

<InvalidExample title="Don't">
Expand All @@ -52,7 +52,7 @@ Some of the Bootstrap 4 classes will be deprecated or dropped in its version 5.
<ValidExample title="Do">

```html
<span class="badge bg-danger text-white rounded-pill">Error badge</span>
<span class="badge text-bg-danger rounded-pill">Error badge</span>
```

</ValidExample>
Expand Down Expand Up @@ -83,7 +83,7 @@ The `.media` component has been replaced with utility classes.
<div class="flex-shrink-0">
[...]
</div>
<div class="flex-grow-1 ml-3">
<div class="flex-grow-1 ms-3">
[...]
</div>
</div>
Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down