title: How to get dir="rtl" to work with bootstrap 4.3.1?
body: <p>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. </p>
  
  <p>I have tried to use <code>direction:rtl</code> in <code>css</code> , <code>dir="rtl"</code> in <code>html</code> and <code>bidi-override</code> 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.</p>
  
  <p>This is my html</p>
  
  <pre><code>&lt;div class="row justify-content-center"&gt;
    &lt;div class="col-sm-6" style="border:1px solid black"&gt;
      &lt;div class="row"&gt;
        &lt;div class="ayat_box"&gt;
          &lt;div class="ayat_ar"&gt;
            &lt;p class="ayat_ar_txt"&gt;
              حَتَّى إِذَا جَاءَ أَمْرُنَا وَفَارَ التَّنُّورُ قُلْنَا احْمِلْ فِيهَا مِنْ كُلٍّ زَوْجَيْنِ اثْنَيْنِ وَأَهْلَكَ إِلَّا مَنْ سَبَقَ عَلَيْهِ الْقَوْلُ وَمَنْ آَمَنَ وَمَا آَمَنَ مَعَهُ إِلَّا قَلِيلٌ  &lt;span class="ayat_period"&gt;٣&lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="ayat_en"&gt;
            &lt;p class="ayat_en_txt"&gt;
  some content in ltr
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="ayat_exp"&gt;
            &lt;p class="ayat_exp_p"&gt;
  some content in ltr
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="ayat_box" style="background: pink"&gt;
          This is another box
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my css:</p>
  
  <pre><code>.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;
  }
  </code></pre>