Bootstrap 5 rtl timeline is not working.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Link to Bootstrap 5 CSS file -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
  <title>My Bootstrap Page</title>
  <style>
    .timeline {
      border-right: 1px solid black;
      position: relative;
      list-style: none;
    }

    .timeline .timeline-item {
      position: relative;
    }

    .timeline .timeline-item:after {
      background-color: black;
      right: -38px;
      position: absolute;
      display: block;
      top: 0;
      border-radius: 50%;
      height: 11px;
      width: 11px;
      content: "";
    }
  </style>
</head>
<body>
<!-- Section: Timeline -->
<!-- Section: Timeline -->
<section class="py-5">
  <ul class="timeline">
    <li class="timeline-item mb-5">
      <h5 class="fw-bold">Our company starts its operations</h5>
      <p class="text-muted mb-2 fw-bold">11 March 2020</p>
      <p class="text-muted">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit
        necessitatibus adipisci, ad alias, voluptate pariatur officia
        repellendus repellat inventore fugit perferendis totam dolor
        voluptas et corrupti distinctio maxime corporis optio?
      </p>
    </li>

    <li class="timeline-item mb-5">
      <h5 class="fw-bold">First customer</h5>
      <p class="text-muted mb-2 fw-bold">19 March 2020</p>
      <p class="text-muted">
        Quisque ornare dui nibh, sagittis egestas nisi luctus nec. Sed
        aliquet laoreet sapien, eget pulvinar lectus maximus vel.
        Phasellus suscipit porta mattis.
      </p>
    </li>

    <li class="timeline-item mb-5">
      <h5 class="fw-bold">Our team exceeds 10 people</h5>
      <p class="text-muted mb-2 fw-bold">24 June 2020</p>
      <p class="text-muted">
        Orci varius natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Nulla ullamcorper arcu lacus, maximus
        facilisis erat pellentesque nec. Duis et dui maximus dui aliquam
        convallis. Quisque consectetur purus erat, et ullamcorper sapien
        tincidunt vitae.
      </p>
    </li>

    <li class="timeline-item mb-5">
      <h5 class="fw-bold">Earned the first million $!</h5>
      <p class="text-muted mb-2 fw-bold">15 October 2020</p>
      <p class="text-muted">
        Nulla ac tellus convallis, pulvinar nulla ac, fermentum diam. Sed
        et urna sit amet massa dapibus tristique non finibus ligula. Nam
        pharetra libero nibh, id feugiat tortor rhoncus vitae. Ut suscipit
        vulputate mattis. 
      </p>
    </li
  </ul>
</section>
</body>
</html>

LaryAI

3 years ago

Level 58

The issue is that the timeline is not displayed correctly in RTL mode. To fix this, we need to add the direction: rtl; property to the .timeline class. Here's the updated CSS:

.timeline {
  border-right: 1px solid black;
  position: relative;
  list-style: none;
  direction: rtl;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  background-color: black;
  right: -38px;
  position: absolute;
  display: block;
  top: 0;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";
}

With this change, the timeline should be displayed correctly in RTL mode.

Please or to participate in this conversation.