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

Question

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;
}

Answer 1

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.