CODEWITHSUNDEEP
htmlcssbootstrap-4right-to-left
Shah Quadri
Shah Quadri

Reputation: 239

How to get dir="rtl" to work with bootstrap 4.3.1?

I am creating a simple html/css page using bootstrap 4.3.1 . In one paragraph, I will be using some arabic text which needs to show up in a right-to-left format.

I have tried to use direction:rtl in css , dir="rtl" in html and bidi-override as well. But nothing seems to be working. I think it has got something to do with bootstrap 4.3.1 but I could be wrong. I am unable to understand where I am going wrong and would greatly appreciate any help.

This is my html

<div class="row justify-content-center">
  <div class="col-sm-6" style="border:1px solid black">
    <div class="row">
      <div class="ayat_box">
        <div class="ayat_ar">
          <p class="ayat_ar_txt">
            حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
          </p>
        </div>
        <div class="ayat_en">
          <p class="ayat_en_txt">
some content in ltr
          </p>
        </div>
        <div class="ayat_exp">
          <p class="ayat_exp_p">
some content in ltr
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="ayat_box" style="background: pink">
        This is another box
      </div>
    </div>
  </div>
</div>

This is my css:

.ayat_box
{
    width: 700px;
    margin:0 auto;
}

.ayat_ar
{
    background: pink;
}

.ayat_ar_txt
{
    direction:rtl;
    font-family: arial;
    font-size:25px;
}

.ayat_period
{
  display:inline-block;
  border-radius:50%;
  border:1px solid black;
  padding-left:5px;
  padding-right:5px;
}

Upvotes: 17

Views: 26934

Answers (8)

Omar AbuRok
Omar AbuRok

Reputation: 165

Just add text-right to align text right and dir="rtl" to make the right-to-left direction:

          <p class="ayat_ar_txt text-right" dir="rtl">
            حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
          </p>

update: according to some replies:

You can do it without boot strap just like following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RTL Text Example</title>
    <style>
        .rtl {
            direction: rtl;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="rtl">
        <p>مرحبا بالعالم!</p>
        <p>أهلا وسهلا بكم في موقعنا.</p>
        <p>شكرا جزيلا لزيارتكم.</p>
    </div>
</body>
</html>

Upvotes: 13

Almagharibi_Wael
Almagharibi_Wael

Reputation: 1

Try below solution. It has worked for me. I hope it helps you.

 <p class="yourClass" dir="rtl">
      <p>Your elements should be here</p>   
 </p>

Upvotes: -1

Dhaval L.
Dhaval L.

Reputation: 657

The following steps could be helpful if someone is adding the RTL support to existing project created using Bootstrap 4 and SASS:

  1. Add dir="rtl" and lang="ar" ('ar' is for arabic) to your HTML (Javascript: document.documentElement.dir = "rtl")
  2. Replace the possible properties with the help of Mozilla RTL Guidelines.
  3. Import sass files from bootstrap4-rtl which converts bootstrap classes for RTL.
  4. Next, change remaining styles by adding extra CSS: [dir="rtl"] .class-name { ... }

Upvotes: 0

dosnetCore
dosnetCore

Reputation: 55

In addition to the above, it is worth adding that simply using rtl bootstrap library it is not always enough. In cases it is necessary to use symbols such as &, !, @, $, etc. they will appear on the right side of the sentence, even though the sentences in Arabic or Hebrew are written from right to left. If you want them to appear at the end of the sentence, (which is the leftmost side of the sentence in Arabic, Hebrew and the like), you must add <html dir="rtl">

Upvotes: 1

Mohsen TOA
Mohsen TOA

Reputation: 809

you can add these classes to your bootstrap.css or bootstrap.min.css file and use them as a class:

.rtl{direction:rtl!important;}
.ltr{direction:ltr!important;}

Upvotes: 4

Alexandre Tranchant
Alexandre Tranchant

Reputation: 4570

You can do it with another library: RTL Bootstrap. It provides CSS to do the job.

This git-diff is displaying you difference between the original Bootstrap library and the RTL Bootstrap library.

Upvotes: 10

Diaa Elgendy
Diaa Elgendy

Reputation: 23

Simply add ("text-right") class to the element you want to have it RTL along with the <html dir="rtl">.

Once your document loads, you run this check and apply the RTL class (text-right), but it will apply to all the web page div elements, enjoy bro and Jazakallah khairan :)

window.onload = function () {
if (document.documentElement.lang == 'ar') {
    var docDivz = document.getElementsByTagName("div");
    for (let i = 0; i < docDivz.length; i++) {
      if (docDivz[i].classList.contains("text-center")) {
        continue;
      }
      docDivz[i].classList.add("text-right");
    }
  }
}

You can do the same for "section" and/or "button" or whatever you want to be RTL.

Upvotes: -1

suhailvs
suhailvs

Reputation: 21730

you can use text-right class.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p dir="rtl" class="text-right">
حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  <span class="ayat_period">٣</span>
</p>

Upvotes: 0

Related Questions