RTL edition of bootstrap v4 for rtl languages like Farsi and Arabic

  • By Mahdi Majidzadeh
  • Last update: Jan 2, 2023
  • Comments: 12

Bootstrap logo

Bootstrap RTL

based on version 4.6.0

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Explore Bootstrap docs »


Install with npm:

npm i bootstrap-v4-rtl

Quick start

Add rtl class to any element and every thing inside that turn to RTL layout

NOTE: This package is designed for multilanguage projects to change all page direction just with adding rtl class, so all left and right classes is reversed when you are in rtl

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

├── css/
│   ├── bootstrap-rtl.css
│   ├── bootstrap-rtl.css.map
│   ├── bootstrap-rtl.min.css
│   └── bootstrap-rtl.min.css.map
└── js/
    ├── bootstrap.js
    └── bootstrap.min.js

We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS source maps (bootstrap.*.map) are available for use with certain browsers' developer tools.


Mahdi Majidzadeh twitter - github




  • 1

    rtl not working in angular carousel

    Hi, I add this version of bootstrap rtl in angular project, it work fine in normal condition but if i want to use ng-bootstrap carousel the pictures move to the right side of page and don't show, how can i fix it? for test i remove rtl bootsatrp from angular. json then carousel work fine

  • 2

    Evaluate how to properly keep the codebase aligned with Bootstrap 4

    It seems that currently the code is not aligned with the currnet bootstrap 4.

    It would be great to identify a way of keeping the code aligned with the latest version of Bootstrap 4 (currently 4.2.1).

  • 3

    float-right and float-left rtl version


    What about the RTL version of float-{sm,md,lg,xl}-{left,right,none} classes I can't find any thing related to those classes since they are replacing the old widely used pull-left and pull-right classes


  • 4

    Padding issue on list-unstyled calss

    I found padding issue on "list-unstyled" class when I was working on my project. And here was my fixing:

    .list-unstyled { padding-right: 0; }

  • 5


    检测到 MahdiMajidzadeh/bootstrap-v4-rtl 一共引入了832个开源组件,存在8个漏洞

    漏洞标题:Axios 安全漏洞
    缺陷组件:[email protected]
    Axios 存在安全漏洞,该漏洞源于在 axios 包中发现了一个 ReDoS(正则表达式拒绝服务)缺陷。攻击者可利用该漏洞为修剪功能提供精心设计的输入导致应用程序消耗过多的 CPU。
    影响范围:(∞, 0.21.3)
    缺陷组件引入路径:[email protected]>[email protected]>[email protected]


  • 6

    Fix division warning

    fix deprecation warning by replacing all divisions with multiply DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

  • 7

    margin between modal buttons

    In the normal version of bootstrap there is a margin between modal buttons

    from _modal.sccs

    // Footer (for actions)
    .modal-footer {
      display: flex;
      align-items: center; // vertically center
      justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
      padding: $modal-inner-padding;
      border-top: $modal-footer-border-width solid $modal-footer-border-color;
      @include border-bottom-radius($modal-content-border-radius);
      // Easily place margin between footer elements
      > :not(:first-child) { margin-left: .25rem; }
      > :not(:last-child) { margin-right: .25rem; }

    and there is this in _rtl.sccs from current version of bootstrap-rtl

    .modal-footer > :not(:first-child) {
        margin-right: .25rem;

    I think it should be changed to:

      .modal-footer > :not(:first-child) {
        margin-right: .25rem;
      .modal-footer > :not(:last-child) {
        margin-left: .25rem;

    and then somehow remove the styles from original bootstrap

  • 8


    .breadcrumb-item+.breadcrumb-item { padding-left: .5rem; --> padding-right: .5rem; }

    .breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: .5rem; --> padding-left: .5rem; color: #6c757d; content: "/"; }

  • 9

    منبع این مخزن معرفی میکنید

    سلام منبع این مخزن معرفی میکنید که در صورت به روز شدن هم ازش استفاده کنیم من خودم 2 تا راه حل دارم نمیدونم این یکی از اونهاست یا نه . چون هر دوتاشون یجایی مشکل دارن

  • 10

    Text align left/right?


    body {
      text-align: left;

    Should this be text-align: right;?

  • 11

    Problem with dropdown-menu

    hi, dear friend. thanks for this helpful expansion. i know maybe this issue has been duplicate (https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl/issues/26#issue-385831150) but i develop my project with your library (latest version on npm), i have a problem with Dropdown in RTL version. you see this problem in pictures. i don't know WHY? can you help me? 1 2

  • 12

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.


    • Prevent overwriting previously decoded tokens 980e0bf



    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28



    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.