Bootstrap 4.6.2 · RTL build

One class flips the whole layout.

Every component below is plain Bootstrap 4 markup. Nothing on this page is duplicated for right-to-left — the rtl class does the work. Use the switches in the top bar to flip direction and language live.

<body class=" ">
npm i bootstrap-v4-rtl
1 class to add
0 markup changes
2 directions, one build

The idea

Add rtl to any element and everything inside it flips: text direction, floats, spacing utilities, dropdown alignment, border radii and grid offsets. The two panes below share identical markup — only the wrapper differs.

Left to right <div>
Shipping address
@
  • Standard 3d
  • Express 1d
Right to left <div class="rtl">
Shipping address
@
  • Standard 3d
  • Express 1d

Load the RTL build once, then flip whatever you need:

<link rel="stylesheet" href="dist/css/bootstrap-rtl.min.css">

<!-- whole page -->
<body class="rtl"> ... </body>

<!-- or a single region -->
<div class="rtl"> ... </div>

<!-- the dir attribute works too -->
<div dir="rtl"> ... </div>

Buttons

Button groups keep their rounded corners on the correct outer edges in both directions.

Typography

Headings, lists and blockquotes align to the reading side automatically.

Heading 1

Heading 3

Heading 5

A lead paragraph stands out from the rest of the copy.

Regular body text with a link, some bold text and inline code.

Muted small print.

  • Unordered item
  • Another item
  1. First step
  2. Second step

Design is not just what it looks like. Design is how it works.

Steve Jobs

Tables

Column order follows the direction — the first column starts on the reading side.

# Name Role Amount
1 Sara Ahmadi Designer 1,250
2 Reza Karimi Developer 980
3 Mina Rad Product manager 2,410
Plan Seats Status
Starter 3 Active
Team 12 Trial

Forms

Labels, checkboxes, switches, select arrows, input group add-ons and validation feedback all move to the correct side.

We never share your email.
@
$
.00
Looks good!
Use at least 8 characters.

Alerts & badges

Dismiss buttons jump to the opposite corner, and toast headers reorder.

Primary Success Danger 42 New

Progress & spinners

Progress bars fill from the reading side.

25%
50%

Cards & lists

Card decks, list groups and media objects reverse their internal order.

Featured
Card title

Some quick example text to build on the card title.

Go somewhere
Updated 3 mins ago
Coloured card

Background utilities work in both directions.

  • An item
  • A second item
Inbox 14 Drafts 2 Spam
Media object

The mr-3 spacing utility becomes a margin on the other side once flipped.

Dropdowns & overlays

Dropdown menus anchor to the correct edge, and modal footers reverse their button order.

Settings
Profile Billing
Sign out

Utilities that flip

Spacing, text alignment and grid offsets are rewritten inside rtl. Flip the direction switch and watch these boxes move.

ml-5 pushed
pushed mr-5
text-right
text-left
text-center
  • float-left and float-right are not mirrored — they stay physical. Use them when you truly mean a fixed side.
  • Code samples should keep direction: ltr so snippets stay readable inside a flipped page.
  • dir="rtl" is styled identically to the rtl class, so either hook works.