So, you're using bootstrap, and you want a few extra features/components that don't come standard. You've scoured the web for these and likely stumbled upon FuelUX or UI Bootstrap (by the Angular Team).

If you're using AngularJS, by all means it's probably easier to use UI Bootstrap. But, if you're just using vanilla Bootstrap I would recommend looking into FuelUX, which

...extends Bootstrap with additional lightweight JavaScript controls for your web applications.

FuelUX provides a great set of extra controls, but today we're focusing on the wizard control.

Standard Wizard

Basically, the wizard allows a step-by-step navigation through different content. It works great, or so I thought until I saw this issue asking if it was possible to use the wizard in right-to-left (RTL) language situations.

After a little investigation it didn't seem possible; so I set out to fix it. It was a pretty simple task requiring only LESS/CSS changes.

RTL Wizard

This issue got me thinking about how we (speaking as a previous maintainer of FuelUX) released an open-source component that left out support for a vast majority of the population. Why did we do that? I guess we just assumed it would work for most people, which was an oversight.

Anyways, this change was released in version 3.8.0, but was not publicized in the release notes. I'm not sure why. Maybe the current maintainers forgot or didn't think it was a relevant thing to report. Who knows, but I'm here to tell you it's now possible without having to copy my gist CSS into your project.

In order to implement the RTL wizard, the markup requires a few changes. I've put full gist below with comments in the HTML where changes need to be made.

Hope this helps!

Example