Migrating from Bootstrap 4
If your wiki moves from Bootstrap 4 to Bootstrap 5, for example with Chameleon 6, which loads Bootstrap 5.3, pages written for Bootstrap 4 need changes. The table lists those that wiki pages need most often; the Bootstrap migration guide lists all of them. Content made with the tags and parser functions of BootstrapComponents 6, the version on this wiki, needs no change, but Bootstrap 4 classes in their class parameter do.
Changes
| Bootstrap 4 | Bootstrap 5 | Example |
|---|---|---|
badge-{color} |
text-bg-{color}, which also sets a readable text color |
Badge example 1 |
badge-pill |
rounded-pill |
Badge example 3 |
card-deck |
A grid: row g-4 around the cards, each card in a col-sm and with h-100, side by side from 576px as in a deck |
Card deck example 1 |
card-columns |
CSS columns on the surrounding div, such as style="column-count: 3; column-width: 15rem; column-gap: 1.5rem", each card with d-inline-block w-100 mb-4 |
Card group example 4 |
Classes with left or right, such as ml-*, text-left, float-right and dropdown-menu-right |
start and end: ms-*, text-start, float-end and dropdown-menu-end, also in responsive forms such as text-md-start |
Chameleon skin - standard layout, Card group example 4 |
sr-only |
visually-hidden |
Carousel example 3 |
no-gutters |
g-0 |
Grid - gutters |
font-weight-*, font-italic |
fw-*, fst-italic |
|
btn-block |
w-100 |
|
jumbotron |
The BootstrapComponents jumbotron, or utilities such as p-5 mb-4 bg-body-tertiary rounded-3 |
Jumbotron example 1 |
var(--light) and the other CSS variables |
The same names starting with --bs-, such as var(--bs-light); the fonts are --bs-font-sans-serif and --bs-font-monospace |
Modal example 2 |
data-toggle, data-target and the other data attributes of Bootstrap's JavaScript |
data-bs-toggle, data-bs-target and so on; other data attributes, such as data-sort-value, stay |
Navs and tabs example 1, Dropdown example 1 |
In a row, Bootstrap 5 gives every direct child the full width unless it is a column. Text, a card without a col around it, or an empty paragraph from a blank line therefore pushes the following columns onto a new line.
Besides content pages, check templates, TemplateStyles pages, MediaWiki:Common.css, MediaWiki:Chameleon.css, MediaWiki:Common.js and a custom Chameleon layout. Each page this wiki updated shows a note that links to its Bootstrap 4 version: list of these pages.
Still working
These classes still work, so they can stay for now. They are deprecated, and Bootstrap 6 will drop them:
text-muted, replaced bytext-body-secondarytext-black-50, replaced bytext-black text-opacity-50text-white-50, replaced bytext-white text-opacity-50
See also
- External website
