RTL, Accessibility and Migrating from Bootstrap 4

Three topics separate a working Bootstrap site from a professional one: serving right-to-left languages, meeting accessibility requirements, and moving legacy Bootstrap 4 code to version 5. After this lesson you will be able to ship an RTL build, audit a page against the accessibility basics, and convert v4 markup with a checklist.

Right-to-Left Support

Bootstrap 5 ships a dedicated RTL stylesheet generated with RTLCSS. Three steps enable it:

Set dir="rtl" and the correct lang on <html>.
Load bootstrap.rtl.min.css instead of bootstrap.min.css.
Use logical utilities (ms-*, me-*, ps-*, pe-*, text-start, text-end, float-start, float-end); they flip automatically.

html

<html lang="he" dir="rtl">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css">

With npm, import bootstrap/dist/css/bootstrap.rtl.min.css, or compile your customized Sass and run the output through RTLCSS in the build:

bash

npm install --save-dev rtlcss
npx rtlcss dist/css/theme.css dist/css/theme.rtl.css

Components such as dropdowns, carousels, offcanvas and breadcrumbs are mirrored by the RTL build with no markup changes. For your own CSS, mark rules that must not be flipped, such as an icon that always points in a physical direction:

css

/*rtl:ignore*/
.icon-arrow-east {
  transform: rotate(0deg);
}

Accessibility Checklist

Bootstrap components are accessible when used as documented, but most requirements come from your markup. Check these on every page:

Structure: one <h1>, a logical heading order (use .h2-.h6 classes when a visual size must differ), landmarks (<header>, <nav aria-label>, <main>, <footer>), lang on <html>, and a skip link with .visually-hidden-focusable as the first focusable element.
Controls: <button type="button"> for actions, <a href> for navigation; aria-label on icon-only controls and aria-hidden="true" on decorative icons. Modals, offcanvas and dropdowns manage focus, but the trigger must be focusable so focus can return to it.
Live regions: dynamic alerts get role="alert"; toasts get role="status" or role="alert" with aria-live.
Forms: every input has a <label> (visible or .visually-hidden), help text and errors are linked with aria-describedby, and radio or checkbox groups sit inside <fieldset> with a <legend>.
Color and motion: not every theme color pairing meets WCAG AA (text-bg-warning uses dark text for this reason), so check custom pairs and never convey state by color alone; custom animations must respect prefers-reduced-motion as Bootstrap's own transitions do.
Testing: tab through the page and confirm a visible focus ring everywhere, run Lighthouse or axe, then test one flow with a screen reader.

Migrating from Bootstrap 4 to 5

The most impactful changes, in the order you will hit them:

| Area | Bootstrap 4 | Bootstrap 5 | |---|---|---| | jQuery | Required | Removed; plugins are vanilla JS | | Data attributes | data-toggle, data-target | data-bs-toggle, data-bs-target | | Spacing | ml-*, mr-*, pl-*, pr-* | ms-*, me-*, ps-*, pe-* | | Alignment and floats | text-left, float-right | text-start, float-end | | Screen readers | .sr-only | .visually-hidden | | Forms | .form-group, .custom-select, .custom-control, .custom-file | mb-3, .form-select, .form-check, .form-control on file inputs | | Typography | .font-weight-bold, .font-italic | .fw-bold, .fst-italic, plus .fs-1 to .fs-6 | | Badges | .badge-primary, .badge-pill | .text-bg-primary, .rounded-pill | | Close button | .close with × | .btn-close, empty element | | Removed components | Jumbotron, media object | Rebuilt with utilities | | Grid | .no-gutters, up to xl | .g-0, g-* gutters, new xxl | | Dropdown alignment | .dropdown-menu-right | .dropdown-menu-end |

A practical migration process:

Swap the CSS and JS files and remove jQuery if nothing else uses it.
Search and replace renamed classes and attributes; a regular expression such as data-(toggle|target|dismiss|parent) to data-bs-$1 catches most attributes.
Rebuild forms with the new classes from the table.
Convert jQuery plugin calls to class instances:

javascript

// Bootstrap 4
$("#confirm").modal("show");
$("#confirm").on("hidden.bs.modal", () => reload());

// Bootstrap 5
import { Modal } from "bootstrap";
const el = document.getElementById("confirm");
Modal.getOrCreateInstance(el).show();
el.addEventListener("hidden.bs.modal", () => reload());

Test every component visually and with the keyboard, then revisit Sass overrides: several variables were renamed and $theme-colors now feeds CSS variables.

Releases from 5.0 to 5.3 contain no breaking changes; you gain color modes, .nav-underline, .icon-link, z-* utilities and the *-subtle/*-emphasis colors.

Common Mistakes

Using ml-* in v5. The class does not exist, so the spacing silently disappears.
Loading the LTR CSS with dir="rtl". Text flips but component layouts do not; the RTL build is required.
Removing focus outlines for aesthetics. Keyboard users lose their position; style :focus-visible instead.
Skipping the data-toggle search. Old attributes fail silently, so dropdowns and modals stop opening.

Key Takeaways

RTL needs dir="rtl", the bootstrap.rtl.min.css build and logical utilities that flip automatically; use /*rtl:ignore*/ for rules that must not.
Accessibility depends on your markup: landmarks, labels, ARIA on icon-only controls, focus visibility, contrast and reduced-motion respect.
Bootstrap 5 removed jQuery, prefixed data attributes with data-bs-, renamed directional utilities to start/end and replaced custom form classes.
Migrate by swapping assets, running search-and-replace on renamed classes and attributes, rebuilding forms and converting jQuery calls to class instances.
Releases 5.0 to 5.3 are backward compatible and add color modes and new utilities.

Next lesson: Capstone: Building an Admin Dashboard - assemble a responsive dashboard with a sidebar, stat cards, tables, forms and dark mode using everything from the course.