title: Bootstrap template based on RTL direction - FLIP HORIZONTAL
body: <p>I have a Bootstrap v4.0.0 template which is LTR direction, I want to change whole template to RTL Direction, I used these following methods:</p>
  
  <pre><code>&lt;html dir="rtl"&gt;
  &lt;body dir="rtl" &gt;
  body { direction:rtl; }
  html { direction:rtl; }
  https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl (bootstrap-rtl.css)
  </code></pre>
  
  <p>but these methods not working. </p>
  
  <p>**</p>
  
  <blockquote>
    <p><strong>What's the best way to completely change page direction like a mirror</strong>
    <strong>FLIP HORIZONTAL? (RTL Direction)</strong></p>
  </blockquote>
  
  <p>**</p>
  
  <blockquote>
    <p>This following CSS code, it will change direction of page based on
    Flip Horizontal, but how to reservse it after that? (<strong>Please have a</strong>
    <strong>look into image in below</strong>)</p>
  </blockquote>
  
  <pre><code>-moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph; /*IE*/
  filter: fliph; /*IE*/
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/HzT1d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HzT1d.png" alt="How to do it with CSS?"></a>
  Thanks in advance</p>