RTL (Right To Left) Theme For Bootstrap 4

File Size: 134 KB
Views Total: 1886
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
RTL (Right To Left) Theme For Bootstrap 4

Bootstrap RTL is a CSS extension to the latest Bootstrap 4 framework to create RTL-aware websites & web applications where the languages are written from right to left (Farsi, Arabic, Hebrew, etc).

Use it as a Bootstrap theme for your next RTL project. Supports all built-in components like Alert, Modal, Carousel, Dropdown, Navbar, etc.

See Also:

How to use it:

1. Download the package and insert the bootstrap-rtl.min.css into your Bootstrap 4 project.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- Bootstrap 4 RTL Theme -->
<link rel="stylesheet" href="/path/to/dist/bootstrap-rtl.min.css" />
<!-- jQuery Is Required For Components -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Bootstrap 4 JavaScript -->
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Add the dir="ltr" attribute to the <html> tag and determine the language your website uses.

<!doctype html>
<html dir="ltr" lang="fa">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap RTL</title>
    <!-- Bootstrap 4 Stylesheet -->
    <link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
    <!-- Bootstrap 4 RTL Theme -->
    <link rel="stylesheet" href="/path/to/dist/bootstrap-rtl.min.css" />
  </head>
  <body>
    Page Content Here
    <!-- jQuery Is Required For Components -->
    <script src="/path/to/cdn/jquery.slim.min.js"></script>
    <!-- Bootstrap 4 JavaScript -->
    <script src="/path/to/cdn/bootstrap.min.js"></script>
  </body>
</html>

Changelog:

2020-06-22

  • Bugfix

2020-06-21

  • Bugfix

2020-06-10

  • fixed offset class

This awesome jQuery plugin is developed by parsakafi. For more Advanced Usages, please check the demo page or visit the official website.