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:

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark float-right">

    <!-- Brand -->
    <a class="navbar-brand" href="#">Logo</a>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="nav-content">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>

</nav>

How can I fix this code to implement RTL navbar?

Where should I put `style="float:right"`? Putting it in `nav` tag makes no difference. — Babr, Dec 26 '18 at 18:58
We Announce the AryaBootstrap, The last version is based on bootstrap 4.3.1 AryaBootstrap is a bootstrap with dual layout align support and, used for LTR and RTL web design. add "dir" to html, thats the only action you need to do. Checkout the AryaBootstrap Website at: http://abs.aryavandidad.com/ AryaBootstrap at GitHub: https://github.com/mRizvandi/AryaBootstrap — mRizvandi, Apr 13 '19 at 13:43

score 11 · Accepted Answer · answered Dec 26 '18 at 20:32

11

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/

answered Dec 26 '18 at 20:32

Mohcin Bounouara

593
4
18

2

This works nice, but I suggest to made a custom class so you don't affect all `
` elements, for example: `nav.nav-rtl {direction: rtl;}` and then apply the class `nav-rtl` to the `
` element you want to customize. Anyway, +1!
– Shidersz Dec 26 '18 at 21:29
1

Yeah i understand you, you have a view in the point.. good thinking.. thank you :) – Mohcin Bounouara Dec 27 '18 at 11:27

score 1 · Answer 2 · answered Dec 26 '18 at 19:16

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

In the first example, in <a class="nav-brand"> is before <button> and <ul> with links, so the brand is on the left.

In second example, the <a class="nav-brand"> is after <button> and <ul> with links, so the brand now is on the right.

Examples :

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Logo on the left -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar on left</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
  
<!-- Logo on the right -->

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
    <a class="navbar-brand" href="#">Navbar on right</a>

</nav>

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

Shidersz · Answer 3 · 2018-12-26T20:23:40.757

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:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
</button>

<a href="#" class="navbar-brand order-sm-2 order-1">Logo</a>

<div class="navbar-collapse collapse order-2 order-sm-1 justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
             <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</div>

</nav>

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 <nav> element in replace of class navbar-expand-sm and avoid to change order of the elements depending on the screen size. Check next example:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar fixed-top navbar-expand navbar-dark bg-dark">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
    <span class="navbar-toggler-icon"></span>
</button>

<a href="#" class="navbar-brand order-2">Logo</a>

<div class="navbar-collapse collapse order-1 justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item">
             <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
             <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</div>

</nav>

If you want the navbar to never collapse, replace class `navbar-expand-sm` by `navbar-expand`, but you will have to modify the order classes also. I will update with another sample for this one... — Shidersz, Dec 26 '18 at 20:20

score 0 · Answer 4 · answered Nov 25 '19 at 07:10

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.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar on right</a>
  <div class="collapse navbar-collapse text-right" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>

</nav>

YoRe · Answer 5 · 2019-10-02T08:57:48.657

-1

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)

edited Oct 02 '19 at 08:57

answered Oct 02 '19 at 08:46

YoRe

39
6

I have tried their code. First of all, its a little outdated (latest is 4.2.1) and second of all, it does not solve the above issue - when changing the order of the tags is necessary in addition to replacing the CS file. – kneidels Oct 03 '19 at 12:00

How to implement RTL bootstrap 4 navbar?

5 Answers5

Linked