oetterer · malberts · May 22, 2026 · May 22, 2026 · May 22, 2026 · May 22, 2026
diff --git a/composer.json b/composer.json
@@ -27,7 +27,7 @@
 	"require": {
 		"php": ">=8.1",
 		"composer/installers": "^2|^1.0.1",
-		"mediawiki/bootstrap": "^5.0"
+		"mediawiki/bootstrap": "^6.0"
 	},
 	"require-dev": {
 		"mediawiki/mediawiki-codesniffer": "46.0.0",
@@ -58,5 +58,10 @@
 			"composer phpunit",
 			"composer cs"
 		]
+	},
+	"extra": {
+		"branch-alias": {
+			"dev-master": "6.x-dev"
+		}
 	}
 }
diff --git a/docs/components.md b/docs/components.md
@@ -22,6 +22,8 @@ the following components are available to be used inside the wiki text:
   want to hide and show large amount of content.
 * **[Jumbotron](components/jumbotron.md)**: A jumbotron indicates a big
   box for calling extra attention to some special content or information.
+  _Bootstrap 5 removed `.jumbotron`; the parser function is retained,
+  now emitting BS5 utility classes for an equivalent look._
 * **[Modal](components/modal.md)**: The Modal component is a dialog
   box/popup window that is displayed on top of the current page.
 * **[Popover](components/popover.md)**: The Popover component produces a

diff --git a/docs/components/accordion.md b/docs/components/accordion.md
@@ -40,6 +40,5 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example
-* https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp
+* https://getbootstrap.com/docs/5.3/components/accordion/
 
diff --git a/docs/components/alert.md b/docs/components/alert.md
@@ -54,6 +54,5 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/alerts/
-* https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/alerts/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
diff --git a/docs/components/badge.md b/docs/components/badge.md
@@ -52,7 +52,6 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/badge/
-* https://www.w3schools.com/bootstrap4/bootstrap_badges.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/badge/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 *
diff --git a/docs/components/button.md b/docs/components/button.md
@@ -78,7 +78,6 @@ background with button color.</dd>
 
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/buttons/
-* https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/buttons/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 *
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -109,6 +109,5 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/card/
-* https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/card/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
@@ -38,5 +38,4 @@ attributes, otherwise the parser will drop all but one:
 ```
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/carousel/
-* https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
+* https://getbootstrap.com/docs/5.3/components/carousel/
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
@@ -29,5 +29,4 @@ be used as the trigger element. In this case, all but the attributes
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/collapse/
-* https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp
+* https://getbootstrap.com/docs/5.3/components/collapse/
diff --git a/docs/components/jumbotron.md b/docs/components/jumbotron.md
@@ -1,9 +1,21 @@
 ## Jumbotron
+
+> **⚠️ Deprecated.** Bootstrap 5 removed the `.jumbotron` component. The
+> `bootstrap_jumbotron` parser function is retained for backward compatibility
+> and now emits the equivalent Bootstrap 5 utility-class combination
+> (`p-5 mb-4 bg-body-tertiary rounded-3`) per the official migration guide
+> linked below. New content should prefer composing utility classes directly.
+> The parser function may be removed in a future major release.
+
 A jumbotron indicates a big box for calling extra attention to some special
 content or information.
 
-A jumbotron is displayed as a grey box with rounded corners. It also enlarges
-the font sizes of the text inside it.
+A jumbotron is displayed as a light box with rounded corners. Note that the
+Bootstrap 4 `.jumbotron` class also enlarged contained headings automatically;
+the Bootstrap 5 utility-class composition does not. If you want the
+BS4-era larger-font look, apply `display-*` / `fs-*` utility classes on
+your headings and paragraphs inside the tag. The migration guide and example
+linked below show the canonical pattern.
 
 See also:
 * [Alert](alert.md)
@@ -33,5 +45,5 @@ add multiple css styles, separate them by a semicolon.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/jumbotron/
-* https://www.w3schools.com/bootstrap4/bootstrap_jumbotron.asp
+* https://getbootstrap.com/docs/5.3/migration/#jumbotron
+* https://getbootstrap.com/docs/5.3/examples/jumbotron/
diff --git a/docs/components/modal.md b/docs/components/modal.md
@@ -76,8 +76,7 @@ be used as the trigger element.</dd>
 </dl>
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/modal/
-* https://www.w3schools.com/bootstrap4/bootstrap_modal.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/modal/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
 
 Please, see also the [known issues](../known-issues.md) with this component.
diff --git a/docs/components/popover.md b/docs/components/popover.md
@@ -94,6 +94,5 @@ behaviour with:
 
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/popovers/
-* https://www.w3schools.com/bootstrap4/bootstrap_popover.asp
-* https://getbootstrap.com/docs/4.1/utilities/colors/
+* https://getbootstrap.com/docs/5.3/components/popovers/
+* https://getbootstrap.com/docs/5.3/utilities/colors/
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
@@ -51,5 +51,4 @@ following to your `Mediawiki:Common.css`:
 ```
 
 ### Links
-* https://getbootstrap.com/docs/4.1/components/tooltips/
-* https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp
+* https://getbootstrap.com/docs/5.3/components/tooltips/
diff --git a/docs/known-issues.md b/docs/known-issues.md
@@ -6,36 +6,26 @@ elements.
 When you put popovers on a page with modals (or image modals),
 the modals break.
 
-### Modals and vector
-Modals are not fully compatible with the vector skin. Therefore they are
-missing the backdrop. Also, you might notice a slight "wobble" in
-vector's header every time the modal pops up.
-
 ### Modals and definition lists
 Some user experience broken html output when trying to use modals as the
 term in definition lists. Using the html equivalent causes the same
 problem.
 
-### Modal backdrops
-Sometimes, not only in vector skin, modal backdrops (the greying out of
-the background) tend to stack the wrong way. In these instances the
-z-index of the modal and the backdrop are ignored and the backdrop
-overlays the modal and everything else. You cannot even close the modal
-and have to reload the page.
-
-When this happens with your installation you have to disable backdrops
-altogether. Please add the following to your `MediaWiki:Common.css` or
-anywhere else where css is processed:
-```css
-.modal-backdrop {
-    display: none;
-}
-```
+### Modal backdrops on Vector and Vector 2022
+On these two skins the page-container creates a stacking context that
+traps the modal beneath its own backdrop. BC ships a CSS workaround
+(`modules/ext.bootstrapComponents.modal.vector-fix.css`) that suppresses
+the backdrop on those skins, applied automatically; no configuration is
+required. Chameleon, Medik, MonoBook, and Timeless don't establish a
+trapping ancestor, so the standard Bootstrap stack works correctly on
+those skins without the workaround. The root-cause fix (modal teleport
+/ portal out of the trapping container) is tracked at
+[issue #91](https://github.com/oetterer/BootstrapComponents/issues/91).
 
 ### Navbar overlaps modal
-Oftentimes when you have problems with the backdrop, your z-index calculation
-is off. Then it can also happen, that your Navbar overlaps the modal. In that case
-simply "push" the modal further down. For example:
+If your skin has a sticky or fixed navbar, the modal heading can slip
+behind it. Push the modal down by a navbar-height in your skin or wiki
+CSS, for example:
 ```css
 .modal {
     top: 60px;

diff --git a/docs/migration-guide.md b/docs/migration-guide.md
@@ -1,7 +1,83 @@
 ## Migration Guide
 
+### Migrating from Bootstrap 4 (BootstrapComponents 5.x) to Bootstrap 5 (BootstrapComponents 6.0)
+
+BootstrapComponents 6.0 upgrades the underlying Bootstrap framework from version 4 to version 5.3. This guide helps you understand the changes and migrate your wiki.
+
+#### System Requirements
+The MediaWiki (1.43 or later) and PHP (8.1 or later) floors are unchanged from BC 5.x; the only new requirement in 6.0 is the underlying Bootstrap extension version.
+- **Bootstrap extension:** `mediawiki/bootstrap` ^6.0 (provides Bootstrap 5.3); BC 5.x used `^5.0` (Bootstrap 4).
+
+#### User Impact
+Most existing wiki markup using BootstrapComponents continues to work without changes; the extension handles most Bootstrap 5 migrations internally. The notable exceptions are noted below.
+
+#### Component Changes
+
+##### Jumbotron
+The Jumbotron component still works but now uses Bootstrap 5 utility classes instead of the removed `.jumbotron` class. The visual appearance should be similar but may have minor differences. Consider:
+- Using utility classes directly: `<div class="p-5 mb-4 bg-body-tertiary rounded-3">`
+- Or continue using `<bootstrap_jumbotron>` tag which is now implemented using these utilities
+- Reference: https://getbootstrap.com/docs/5.3/examples/jumbotron/
+
+##### `color="default"`
+Bootstrap 5 has no `default` colour family (it was dropped in BS4 already). BC accepts `color="default"` for back-compat but the resulting `*-default` classes are effectively unstyled at the framework level. If you want the BS3-era neutral look, pick a real BS5 colour explicitly: `color="secondary"` (mid-grey filled, matches the BS4 upstream recommendation) or `color="light"` (light filled, closer to BS3's actual visual character).
+
+##### Badge Pill
+If you're using custom CSS targeting `.badge-pill`, update to `.rounded-pill`:
+```css
+/* Old */
+.badge-pill { ... }
+
+/* New */
+.rounded-pill { ... }
+```
+
+##### Alert and Modal Close Buttons
+Close buttons now use Bootstrap 5's `.btn-close` class. If you have custom CSS targeting `.close`:
+```css
+/* Old */
+.close { ... }
+
+/* New */
+.btn-close { ... }
+```
+
+#### JavaScript Changes
+Bootstrap 5 removed jQuery dependency. If you have custom JavaScript interacting with Bootstrap components:
+
+**Old (Bootstrap 4 + jQuery):**
+```javascript
+$('.carousel').carousel();
+$('[data-toggle="tooltip"]').tooltip();
+```
+
+**New (Bootstrap 5 vanilla JS):**
+```javascript
+document.querySelectorAll('.carousel').forEach(el => {
+    new bootstrap.Carousel(el);
+});
+document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
+    new bootstrap.Tooltip(el);
+});
+```
+
+#### Data Attributes
+If you're using custom HTML with Bootstrap data attributes, update to the `data-bs-*` prefix:
+- `data-toggle` → `data-bs-toggle`
+- `data-target` → `data-bs-target`
+- `data-dismiss` → `data-bs-dismiss`
+- `data-slide` → `data-bs-slide`
+- `data-parent` → `data-bs-parent`
+- `data-content` → `data-bs-content`
+- `data-placement` → `data-bs-placement`
+- `data-trigger` → `data-bs-trigger`
+
+---
+
+### Migrating from Bootstrap 3 (BootstrapComponents 1.x) to Bootstrap 4 (BootstrapComponents 4.x-5.x)
+
 There have been some changes between versions ~1.0 and ~4.0. Foremost is that
-the new BootstrapComponents utilizes Twitter Bootstrap4. Therefore, it mirrors
+the new BootstrapComponents utilizes Twitter Bootstrap 4. Therefore, it mirrors
 changes made by Bootstrap.
 
 Also, extension loading must now be done manually in your LocalSettings, no

diff --git a/docs/release-notes.md b/docs/release-notes.md
@@ -5,8 +5,18 @@
 Released on TBD
 
 Breaking changes:
-* requires MediaWiki 1.43 or later
-* requires PHP 8.1 or later
+* requires `mediawiki/bootstrap` ^6.0 (Bootstrap 5)
+
+Changes:
+* migrate to Bootstrap 5.3
+* component init no longer requires jQuery
+* badge classes updated: `badge-pill` becomes `rounded-pill`, `badge-<color>` becomes `text-bg-<color>`
+* alert and modal close buttons use the Bootstrap 5 `btn-close` shape
+* jumbotron now composes utility classes; Bootstrap 5 removed `.jumbotron`
+* carousel indicators use `<button>` elements
+* `color="default"` continues to be accepted for back-compat but renders effectively-unstyled under Bootstrap 5; see the [migration guide](migration-guide.md) for replacements
+
+See the [migration guide](migration-guide.md) for upgrade instructions.
 
 ### BootstrapComponents 5.2.4
 

diff --git a/extension.json b/extension.json
@@ -109,7 +109,9 @@
 			"scripts": "ext.bootstrapComponents.carousel.js"
 		},
 		"ext.bootstrapComponents.modal.fix": {
-			"styles": "ext.bootstrapComponents.modal.fix.css"
+			"dependencies": "ext.bootstrap.scripts",
+			"styles": "ext.bootstrapComponents.modal.fix.css",
+			"scripts": "ext.bootstrapComponents.modal.js"
 		},
 		"ext.bootstrapComponents.modal.vector-fix": {
 			"styles": "ext.bootstrapComponents.modal.vector-fix.css"

diff --git a/modules/ext.bootstrapComponents.carousel.fix.css b/modules/ext.bootstrapComponents.carousel.fix.css
@@ -30,6 +30,6 @@
     margin: auto;
 }
 
-.carousel ol.carousel-indicators {
+.carousel .carousel-indicators {
     margin: 0 0 10px -30%;
 }
diff --git a/modules/ext.bootstrapComponents.carousel.js b/modules/ext.bootstrapComponents.carousel.js
@@ -1,5 +1,5 @@
 /**
- * Contains javascript code executed when tooltips are used.
+ * Contains javascript code executed when carousels are used.
  *
  * @copyright (C) 2018, Tobias Oetterer, Paderborn University
  * @license       https://www.gnu.org/licenses/gpl-3.0.html GNU General Public License, version 3 (or later)
@@ -23,6 +23,25 @@
  * @author        Tobias Oetterer
  */
 
-$(function () {
-	$('.carousel').carousel();
-});
+( function () {
+	'use strict';
+
+	// Wait for DOM to be ready
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', initCarousels );
+	} else {
+		initCarousels();
+	}
+
+	function initCarousels() {
+		if ( typeof bootstrap === 'undefined' || !bootstrap.Carousel ) {
+			// eslint-disable-next-line no-console
+			console.warn( 'BootstrapComponents: bootstrap.Carousel is not available; carousels will not cycle.' );
+			return;
+		}
+		const carouselElements = document.querySelectorAll( '.carousel' );
+		carouselElements.forEach( function ( element ) {
+			new bootstrap.Carousel( element );
+		} );
+	}
+}() );
diff --git a/modules/ext.bootstrapComponents.modal.js b/modules/ext.bootstrapComponents.modal.js
@@ -0,0 +1,28 @@
+/**
+ * Initialises Bootstrap modal containers on the page so their triggers can open them.
+ */
+
+( function () {
+	'use strict';
+
+	// Wait for DOM to be ready
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', initModals );
+	} else {
+		initModals();
+	}
+
+	function initModals() {
+		if ( typeof bootstrap === 'undefined' || !bootstrap.Modal ) {
+			// eslint-disable-next-line no-console
+			console.warn( 'BootstrapComponents: bootstrap.Modal is not available; modal triggers will not work.' );
+			return;
+		}
+		// Instantiate every .modal element so trigger clicks (or programmatic
+		// bootstrap.Modal.getOrCreateInstance(el).show()) work as expected.
+		const modalList = document.querySelectorAll( '.modal' );
+		modalList.forEach( function ( modalEl ) {
+			bootstrap.Modal.getOrCreateInstance( modalEl );
+		} );
+	}
+}() );