RTL

The change that might have some of the biggest implications to migrating sites is the adoption of RTL or Right to Left classes and multiple version of Bootstrap to add this capability.

RTL Classes

• -start and -end
• TRBL -> TEBS
• Optional Install
• Search and Replace

Floats Margin

Bootstrap has a lot of classes like for example, the margin and padding classes which assume that you want to add spacing to one or more sides. Even if you're not using a language that requires an RTL display, horizontal classes now have the new start and end names.

That means that instead of Top, Right, Bottom, Left, you now have to use Top, End, Bottom and Start. It's a bit jarring to get used to doing this.

If you actually WANT the text to load in right to left, you have load a different CSS file, so make sure you look at the install folder for the right version of your project.

Upgrading is not as bad as you think. It's a simple search and replace for the left keyword and the right keyword, but since these classes are everywhere, you'll be doing this a lot.

You can see a good example of it here, Normally, the float CSS property uses the left and right keyword, but in this new version of bootstrap you can see that's been switched to left and right.

Sometimes the words will be spelled out and sometimes the keyword to replace is a single letter. This does make it more challenging to find and replace things though.

Exceptions

• Popper.js
• data- attributes
• Tooltips/Popovers

Try it

Speaker Notes:

Bootstrap uses the Popper.js library to manage how different components work. This library hasn't been updated with the RTL approach so in instances where you'll be using Popper, you'll have to remember to use

This shows up primarily in data attributes where you use javascript to configure and control how popper manages dropdowns.

You can see this at work in tooltips and popovers where the popper.js library uses left and right values that are passed through data properties.