How to implement RTL bootstrap 4 navbar?

Question

I'd like to make my bootstrap navbar RTL. That is the logo in the right and the links flow from right to left. I have tried different tricks but none of they works. Here is the code I have right now:

How can I fix this code to implement RTL navbar?

user_1854827 · Answer

You just need to add a direction to your NAV:

nav {direction: rtl;}

This is an working example based on your CODE https://jsfiddle.net/Mohcinbn/7b6wa8rL/

user_396200 · Answer

If you just want to invert, so just change the order of the navbar-brand element

In the first example, in is before


      
        Home (current)
      
      
        Link
      
      
        Disabled


  
  


  
  

  
    
      
        Home (current)
      
      
        Link
      
      
        Disabled
      
    
    
      
      
    
  
    Navbar on right

Here you have more details : https://getbootstrap.com/docs/4.1/components/navbar/#toggler

user_10366495 · Answer

One approach is using class justify-content-end (Read more here about justify-content-) on the collapsing navbar and play with the order- classes for keeps things nicely ordered when the navbar is collapsed / not collapsed. Check next example:

UPDATE: Show another alternative with a navbar that never collapses to a button. In this case, you need to use class navbar-expand on the

element in replace of class navbar-expand-sm and avoid to change order of the elements depending on the screen size. Check next example:

user_2682025 · Answer

Based on @Guilherme answer that's how it worked for me. His answer didn't work for me because the "navbar-toggler" button is still on the left and the "Brand" name going down when you open the toggler button. so this answer is going to fix these thing too.


  
  Navbar on right
  
    
      
        Home (current)
      
      
        Link
      
      
        Disabled

user_4462980 · Answer

Use style attributes are not enough for RTL languages and also if you are not familiar to CSS codes, changing bootstrap by yourself is a daunting task!

I suggest you use a Right to Left framework forked from bootstrap, for example:

RTLCSS Bootstrap (WebSite - Github)

How to implement RTL bootstrap 4 navbar?

5 Answers