Setting up RTL

We have included all the Tools to make your Website completely RTL ready. Simply follow the steps below:

Code Example:

  • Step 1

    Add the dir="rtl" to the <html> Tag.

    Example:

    <html dir="rtl" lang="ar">
  • Step 2

    Add the RTL related CSS in the Document <head>.

    Example:

    <head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="SemiColonWeb" />

	<!-- Stylesheets
	============================================= -->
	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
	<link rel="stylesheet" href="css/bootstrap-rtl.css" type="text/css" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="style-rtl.css" type="text/css" />
	<link rel="stylesheet" href="css/dark.css" type="text/css" />
	<link rel="stylesheet" href="css/font-icons.css" type="text/css" />
	<link rel="stylesheet" href="css/animate.css" type="text/css" />
	<link rel="stylesheet" href="css/magnific-popup.css" type="text/css" />

	<link rel="stylesheet" href="css/custom.css" type="text/css" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<!-- Document Title
	============================================= -->
	<title>Page | Canvas</title>

</head>
  • Step 3

    Add the .rtl Class to the <body> Tag.

    Example:

    <body class="stretched rtl">

Last Modified: June 27, 2020

Need Help?