Bootstrap breadcrumb not working correctly in RTL mode-CodePudding

I'm trying to create a Bootstrap breadcrumb inside my next.js app. when I add the sample code from the Bootstrap's documentation inside my project, the code works just fine in LTR mode, but when I try to display it in RTL using dir="rtl", the breadcrumb doesn't work as expected

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav dir="rtl" aria-label="breadcrumb">
  <ol >
    <li >
      <a href="#">Home</a>
    </li>
    <li >
      <a href="#">Library</a>
    </li>
    <li  aria-current="page">
      Data
    </li>
  </ol>
</nav>

so the question is that why is it behaving like this and what's the solution?

CodePudding user response：

Per the RTL docs you need to load the RTL version of the library.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384- qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" crossorigin="anonymous">

<nav dir="rtl" aria-label="breadcrumb">
  <ol >
    <li >
      <a href="#">Home</a>
    </li>
    <li >
      <a href="#">Library</a>
    </li>
    <li  aria-current="page">
      Data
    </li>
  </ol>
</nav>