RTL Theme for Bootstrap v3.x

  • By Morteza Ansarinia
  • Last update: Dec 28, 2022
  • Comments: 15

Bootstrap 3 RTL Theme

CDNJS version

Note: Hopefully, they will add rtl support to the next major release of bootstrap, so this project will be obsolete. However, it's going to be updated for the next 3.x releases.

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.

Bootstrap RTL provides simple yet robust right-to-left capability for Bootstrap 3, by employing new theming feature of it. Simply put its CSS after bootstrap's original CSS, to the pages designed by Bootstrap 3. It works just like an extension on top of the original Bootstrap:

<!-- Original Bootstrap 3.x -->
<link rel="stylesheet" href="bootstrap.css">

<!-- Bootstrap RTL Theme -->
<link rel="stylesheet" href="bootstrap-rtl.css">

Or load it from CDN:

<!-- Load Bootstrap RTL theme from RawGit -->
<link rel="stylesheet" href="//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css">

Quick start

To get started, download latest release. Check examples/ directory for more. It's just like Bootstrap 3, nothing special. You can also install it via bower:

  • Run bower install bootstrap-rtl and latest version will be installed under bower_components/bootstrap-rtl/ directory.

In addition to bootstrap distribution, LESS codes for RTL theme and compiled CSS (bootstrap-rtl.css) are provided, as well as minified CSS (bootstrap-rtl.min.css). Check dist/ directory for all the codes you need.

Auto Flip (.flip)

To automatically flip placements from right to left and vice versa (in bilingual pages), use .flip alongside .pull-right and .pull-left. This is a custom class and is not available in the original Bootstrap 3.

Building CSS and JavaScript

Bootstrap RTL uses Grunt for working with the framework. Follow these simple steps to prepare and compile:

  1. Run npm install to download and prepare dependencies.
  2. Run grunt, and check dist/ directory for outputs.

Development

Contributors to Bootstrap RTL must agree the license by signing on the bottom of the CONTRIBUTORS.md file. To contribute:

  • fork the bootstrap-rtl repository.
  • make your changes
  • first time contributors: Sign CONTRIBUTORS.md by adding your github username, full name, email address, and first contribution date. As follows: YYYY/MM/DD, Github Username, Full Name, Email Address
  • commit your changes.
  • send a pull request.

Important Notice: Before submitting any pull request, please ensure that your changes merge cleanly with the main repository at morteza/bootstrap-rtl.

Feature requests, and bug fixes

If you want a feature or a bug fixed, report it via project's issues tracker. However, if it's something you can fix yourself, fork the project, do whatever it takes to resolve it, and finally submit a pull request. I will personally thank you, and add your name to the list of contributors.

Author

Morteza Ansarinia

License

I have no idea what licenses are for exactly. So there is no license control over this bootstrap-rtl project. However bootstrap itself is licensed by Twitter, Inc. under the MIT License (MIT).

If it really matters to you to have a license to avoid litigations, this is an unlicensed public domain software. Read UNLICENSE file for more.

Github

https://github.com/morteza/bootstrap-rtl

Comments(15)

  • 1

    npm ERR! 404 'bootstrap-rtl' is not in the npm registry.

    when npm install

    npm ERR! 404 'bootstrap-rtl' is not in the npm registry. npm ERR! 404 You should bug the author to publish it npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, or http url, or git url.

    npm ERR! System Linux 3.13.0-45-generic npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install" "bootstrap-rtl" npm ERR! cwd /home/obada/WebstormProjects/Fahras npm ERR! node -v v0.10.25 npm ERR! npm -v 1.3.10 npm ERR! code E404 npm ERR! npm ERR! Additional logging details can be found in: npm ERR! /home/obada/WebstormProjects/Fahras/npm-debug.log npm ERR! not ok code 0

  • 2

    Needs to have a License

    Currently no license is associated with this project (be it MIT, GPL, or even public domain). This is a problem for businesses wanting to use this code, as without a license, it gains a natural copyright under your name. A license states how it can be used and by whom, which is required to allow a business to use this.

    In order for me to be able to use this code, I need a license attached to it.

  • 3

    The navbar is not flipping

    Hi, Thank you for this valuable theme!

    I am having an issue with my navbar which won't flip correctly. I am expecting my navbar-brand to go to the right, the menu goes to the left.

    Here is the html code that I am using.

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar">A</span>
            <span class="icon-bar">B</span>
            <span class="icon-bar">C</span>
          </button>
          <a href="/home" class="navbar-brand">App Name</a>
        </div>

         <form action="/languages/set" class="navbar-form navbar-right" method="post" id="GlobalLanguagesForm" novalidate="novalidate">
	<div class="form-group">
	    <label class="sr-only" for="GlobalLanguagesMenu">Client</label>
        <select class="form-control" id="GlobalLanguagesMenu" name="language" aria-invalid="false">
        	        	<option value="en">English</option>
        	        	<option value="ar" selected="">Arabic</option>
        			</select>
	</div>
</form>
        <div id="navbar" class="collapse navbar-collapse">

                      <ul class="nav navbar-nav navbar-right">
                            <li><a href="home/">Home</a></li>
                        </ul>
                  </div><!--/.nav-collapse -->


      </div>
    </nav>
  • 4

    pull-right pull left

    Hello Sir

    i have found some alignement class missedin your css , the class are

    .pull-right{float:left!important} .pull-left{float:right!important} .text-right {text-align: left;} .text-left {text-align: right;}

  • 5

    Github Pages

    Hi,

    I'm thinking of making a gh-pages branch for using bootstrap examples to test rtl.

    I will use grunt-wiredep to automatically insert bootstrap-rtl theme file.

  • 6

    Wrong width of datepicker

    datepicker

    when adding bootstrap-rtl the width of the datepicker is get increased. I use this tool for datepicker https://github.com/eternicode/bootstrap-datepicker and it works fine without the bootstrap-rtl

  • 7

    Question/help: angular app with both rtl and ltr pages

    Is it possible to have both rtl and ltr on the same site/application?

    I have an angular app that is mainly rtl. However, I need to do ltr for a few views/components. Is this possible? If that is the case is there an example I can take a few ideas?

  • 8

    RTL support for bootswatch themes

    Hi, can you provide RTL support for bootswatch themes too ? this version is working almost right with bootswatch themes but not 100%, it only needs miner adjustments.

    it would be appreciated.

  • 9

    Add [dir="rtl"] in grif-framework-rtl-.less

    After the compilation just the first class has [dir="rtl"] as the following

    [dir="rtl"] col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{ //----------- } But my changes solved that Thank you

  • 10

    Wrong version number on top of 3.3.4-rc1 distribution

    At the beginning of 3.3.4-rc1 distribution it states

    /*******************************************************************************
 *              bootstrap-rtl (version 3.3.2-rc1)
 *      Author: Morteza Ansarinia (http://github.com/morteza)
 *  Created on: March 05,2015
 *     Project: bootstrap-rtl
 *   Copyright: Unlicensed Public Domain
 *******************************************************************************/

    which is obviously wrong.

  • 11

    input group border color

    When applying the bootstrap-rtl the input-group border will be override. May be something wrong with

    .input-group-addon:first-child{ border-left:0; border-right:1px solid }

    The firebug shows that the bootstrap overrided value is -moz-use-text-color !!!

    I am using bootstrap-rtl-3.3.4-rc1.

    PS: This happens for .input-group-addon:last-child too

  • 12

    get confused with the bootstrap-flipped.css

    do I have to include both bootstrap-rtl.css or I can just use the bootstrap-flipped.css

    dose the bootstrap-flipped.css use left align for .right classes and right align for .left classes. is it the idea?

  • 13

    Text within svg components seems to be transformed out of the box

    I'm using [email protected] and experiencing an issue when putting text within svg components. As you can see in the snapshot below:

    image

    The following code snippet shows how the styles are applied to the svg component:

    <g class="node" transform="translate(169.0078125,161.5)" style="opacity: 1;">
    <rect rx="5" ry="5" x="-21.0390625" y="-20.5" width="42.078125" height="41"></rect>
    <g class="label" transform="translate(0,0)">
        <g transform="translate(-11.0390625,-10.5)">
                <text style="padding-left: 5px; margin-left: 5px"> 
                        <tspan xml:space="preserve" dy="1em" x="1">تهران</tspan>
                </text>
        </g>
    </g>
</g>

    The issue seems to be at 4th line when translate(-11.0390625,-10.5) is applied to the <g> element. If I manually change (-11, -10) to (11, -10) it ends up placing the text in the correct place.

    Also removing bootstrap-rtl from the page fixes the issue but obviously missing the advantages of amazing bootstrap-rtl component.

  • 14

    float in in small screen

    in small screen all grid elements such as col-md-1 , col-md-2 , .... lose their floating property and i had to manually add this code in my custom styles file :

    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float : right; }

  • 15

    input-group-addon within input-group is not flipped!

    Here is the Html code that I am using

    <div class="form-group">
    <label for="pick_up_time" class="col-md-2 control-label">Some Label</label>
    <div class="col-md-10">
        <div class="input-group input-width-input time-picker">
            <input class="form-control" name="pick_up_time" type="text" id="pick_up_time" value="" required>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-time"></span>
            </span>
        </div>
    </div>
</div>

    This is how it looks when using using bootstrap-flipped.min.css file

    screenshot_1

Popular Tag

Related