title: RTL Bootstrap TAB
body: <p>Good day, 
  i need to show the tabs from RTL. currently the order as you can see on this example is LTR Our Story , Mission, Our Activity, FAQ
  it should be same order but RTL 
  FAQ, Our Activity, Mission, Our Story</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav {
    margin-bottom: 0;
    padding-right: 0;
    list-style: none;
  }
  
  .nav &gt; li {
    position: relative;
    display: block;
  }
  
  .nav &gt; li &gt; a {
    position: relative;
    display: block;
    padding: 10px 15px;
  }
  
  .nav &gt; li &gt; a:hover,
  .nav &gt; li &gt; a:focus {
    text-decoration: none;
    background-color: transparent;
  }
  
  .nav &gt; li.disabled &gt; a {
    color: #e4eaec;
  }
  
  .nav &gt; li.disabled &gt; a:hover,
  .nav &gt; li.disabled &gt; a:focus {
    color: #e4eaec;
    text-decoration: none;
    background-color: transparent;
    cursor: not-allowed;
  }
  
  .nav .open &gt; a,
  .nav .open &gt; a:hover,
  .nav .open &gt; a:focus {
    background-color: transparent;
    border-color: #5d9cec;
  }
  
  .nav .nav-divider {
    height: 1px;
    margin: 9.5px 0;
    overflow: hidden;
    background-color: #e5e5e5;
  }
  
  .nav &gt; li &gt; a &gt; img {
    max-width: none;
  }
  
  .nav-tabs {
    border-bottom: 1px solid #dddddd;
  }
  
  .nav-tabs &gt; li {
    float: right;
    margin-bottom: -1px;
  }
  
  .nav-tabs &gt; li &gt; a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
  }
  
  .nav-tabs &gt; li &gt; a:hover {
    border-color: #dddddd #dddddd #dddddd;
  }
  
  .nav-tabs &gt; li.active &gt; a,
  .nav-tabs &gt; li.active &gt; a:hover,
  .nav-tabs &gt; li.active &gt; a:focus {
    color: #dde6e9;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-bottom-color: transparent;
    cursor: default;
  }
  
  .nav-tabs.nav-justified {
    width: 100%;
    border-bottom: 0;
  }
  
  .nav-tabs.nav-justified &gt; li {
    float: none;
  }
  
  .nav-tabs.nav-justified &gt; li &gt; a {
    text-align: center;
    margin-bottom: 5px;
  }
  
  .nav-tabs.nav-justified &gt; .dropdown .dropdown-menu {
    top: auto;
    right: auto;
  }
  
  @media (min-width: 768px) {
    .nav-tabs.nav-justified &gt; li {
      display: table-cell;
      width: 1%;
    }
  
    .nav-tabs.nav-justified &gt; li &gt; a {
      margin-bottom: 0;
    }
  }
  
  .nav-tabs.nav-justified &gt; li &gt; a {
    margin-right: 0;
    border-radius: 4px;
  }
  
  .nav-tabs.nav-justified &gt; .active &gt; a,
  .nav-tabs.nav-justified &gt; .active &gt; a:hover,
  .nav-tabs.nav-justified &gt; .active &gt; a:focus {
    border: 1px solid #dddddd;
  }
  
  @media (min-width: 768px) {
    .nav-tabs.nav-justified &gt; li &gt; a {
      border-bottom: 1px solid #dddddd;
      border-radius: 4px 4px 0 0;
    }
  
    .nav-tabs.nav-justified &gt; .active &gt; a,
    .nav-tabs.nav-justified &gt; .active &gt; a:hover,
    .nav-tabs.nav-justified &gt; .active &gt; a:focus {
      border-bottom-color: #f5f7fa;
    }
  }
  
  .nav-pills &gt; li {
    float: right;
  }
  
  .nav-pills &gt; li &gt; a {
    border-radius: 4px;
  }
  
  .nav-pills &gt; li + li {
    margin-right: 2px;
  }
  
  .nav-pills &gt; li.active &gt; a,
  .nav-pills &gt; li.active &gt; a:hover,
  .nav-pills &gt; li.active &gt; a:focus {
    color: #ffffff;
    background-color: #5d9cec;
  }
  
  .nav-stacked &gt; li {
    float: none;
  }
  
  .nav-stacked &gt; li + li {
    margin-top: 2px;
    margin-right: 0;
  }
  
  .nav-justified {
    width: 100%;
  }
  
  .nav-justified &gt; li {
    float: none;
  }
  
  .nav-justified &gt; li &gt; a {
    text-align: center;
    margin-bottom: 5px;
  }
  
  .nav-justified &gt; .dropdown .dropdown-menu {
    top: auto;
    right: auto;
  }
  
  @media (min-width: 768px) {
    .nav-justified &gt; li {
      display: table-cell;
      width: 1%;
    }
  
    .nav-justified &gt; li &gt; a {
      margin-bottom: 0;
    }
  }
  
  .nav-tabs-justified {
    border-bottom: 0;
  }
  
  .nav-tabs-justified &gt; li &gt; a {
    margin-left: 0;
    border-radius: 4px;
  }
  
  .nav-tabs-justified &gt; .active &gt; a,
  .nav-tabs-justified &gt; .active &gt; a:hover,
  .nav-tabs-justified &gt; .active &gt; a:focus {
    border: 1px solid #dddddd;
  }
  
  @media (min-width: 768px) {
    .nav-tabs-justified &gt; li &gt; a {
      border-bottom: 1px solid #dddddd;
      border-radius: 4px 4px 0 0;
    }
  
    .nav-tabs-justified &gt; .active &gt; a,
    .nav-tabs-justified &gt; .active &gt; a:hover,
    .nav-tabs-justified &gt; .active &gt; a:focus {
      border-bottom-color: #f5f7fa;
    }
  }
  
  .tab-content &gt; .tab-pane {
    display: none;
  }
  
  .tab-content &gt; .active {
    display: block;
  }
  
  .nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  .navbar {
    position: relative;
    min-height: 55px;
    margin-bottom: 21px;
    border: 1px solid transparent;
  }
  
  @media (min-width: 768px) {
    .navbar {
      border-radius: 4px;
    }
  }
  
  @media (min-width: 768px) {
    .navbar-header {
      float: right;
    }
  }
  
  .navbar-collapse {
    overflow-x: visible;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
  }
  
  .navbar-collapse.in {
    overflow-y: auto;
  }
  
  @media (min-width: 768px) {
    .navbar-collapse {
      width: auto;
      border-top: 0;
      box-shadow: none;
    }
  
    .navbar-collapse.collapse {
      display: block !important;
      height: auto !important;
      padding-bottom: 0;
      overflow: visible !important;
    }
  
    .navbar-collapse.in {
      overflow-y: visible;
    }
  
    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
      padding-right: 0;
      padding-left: 0;
    }
  }
  
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 340px;
  }
  
  @media (max-device-width: 480px) and (orientation: landscape) {
    .navbar-fixed-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
      max-height: 200px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- Nav tabs --&gt;
                              &lt;ul class="nav nav-tabs nav-justified" role="tablist"&gt;
                                  &lt;li class="active"&gt;&lt;a href="#story" role="tab" data-toggle="tab"&gt;Our Story&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#mission" role="tab" data-toggle="tab"&gt;Mission&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#activity" role="tab" data-toggle="tab"&gt;Our Activity&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#faq" role="tab" data-toggle="tab"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>