Timeline

Timeline is the presentation of a chronological sequence of events along a drawn line that equips a viewer to understand temporal relationships quickly.

We are using animate on scroll plugin to animate timeline on page scroll. Read the official Animate on scroll for a full list of instructions and other options.

Basic Timeline

Create a basic timeline by using .timeline as a wrapper of .timeline-item. Define your events inside .timeline-event.

Add a point to timeline by using .timeline-point inside .timeline-item. Use three different kind of timeline pointer options: Point Timeline, Outline Timeline and Indicator Timeline with Icon. To create a point timeline, use .timeline-point-primary with .timeline-point. To create a outline timeline, use .timeline-outline with .timeline. To create a indicator timeline with icon, use .timeline-indicator-primary with .timeline-indicator.

Change indicator's color by using class timeline-point-{color} and timeline-indicator-{color} with .timeline-point & .timeline-indicator respectively.

Info: You can use all point, icon and advanced indicator together in same timeline.

Preview
HTML

12 Invoices have been paid
12 min ago

Invoices have been paid to the company

invoices.pdf
Client Meeting
45 min ago

Project meeting with john @10:15am

Lester McCarthy (Client)
CEO of Pixinvent
Create a new project for client
2 Day Ago

6 team members in a project
- - +3

<ul class="timeline">
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0 text-body">12 Invoices have been paid</h6>
        <small class="text-muted">12 min ago</small>
      </div>
      <p class="mb-2">
        Invoices have been paid to the company
      </p>
      <div class="d-flex align-items-center mb-1">
        <div class="badge bg-lighter rounded mb-1_5">
          <img src="assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
          <span class="h6 mb-0">invoices.pdf</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-success"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Client Meeting</h6>
        <small class="text-muted">45 min ago</small>
      </div>
      <p class="mb-2">
        Project meeting with john @10:15am
      </p>
      <div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
        <div class="d-flex flex-wrap align-items-center">
          <div class="avatar avatar-sm me-2">
            <img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
            <small>CEO of ThemeSelection</small>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-info"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Create a new project for client</h6>
        <small class="text-muted">2 Day Ago</small>
      </div>
      <p class="mb-2">
        6 team members in a project
      </p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
          <div class="d-flex flex-wrap align-items-center">
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li class="avatar">
                <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Timeline Outlined

Create timeline Outlined by using class .timeline-outline with .timeline class.

Preview
HTML

12 Invoices have been paid
12 min ago

Invoices have been paid to the company

invoices.pdf
Client Meeting
45 min ago

Project meeting with john @10:15am

Lester McCarthy (Client)
CEO of Pixinvent
Create a new project for client
2 Day Ago

6 team members in a project
- - +3

                <ul class="timeline timeline-outline mb-0">
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">12 Invoices have been paid</h6>
        <small class="text-muted">12 min ago</small>
      </div>
      <p class="mb-2"> Invoices have been paid to the company</p>
      <div class="d-flex align-items-center mb-1">
        <div class="badge bg-lighter rounded mb-1_5">
          <img src="assets/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
          <span class="h6 mb-0 text-body">invoices.pdf</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-success"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Client Meeting</h6>
        <small class="text-muted">45 min ago</small>
      </div>
      <p class="mb-2">
        Project meeting with john @10:15am
      </p>
      <div class="d-flex justify-content-between flex-wrap gap-2 mb-1_5">
        <div class="d-flex flex-wrap align-items-center">
          <div class="avatar avatar-sm me-2">
            <img src="assets/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
            <small>CEO of ThemeSelection</small>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-info"></span>
    <div class="timeline-event">
      <div class="timeline-header mb-3">
        <h6 class="mb-0">Create a new project for client</h6>
        <small class="text-muted">2 Day Ago</small>
      </div>
      <p class="mb-2">6 team members in a project</p>
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
          <div class="d-flex flex-wrap align-items-center">
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
                <img class="rounded-circle" src="assets/img/avatars/1.png" alt="Avatar" />
              </li>
              <li class="avatar">
                <span class="avatar-initial rounded-circle pull-up text-heading" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Center

Create a centered timeline by using .timeline-center with .timeline. Centered Timeline's items will automatically take their position. If you want to position them manually, you can use .timeline-item-{left|right} with .timeline-item.

Use animate on scroll for timeline animation, click here to learn about it's usage.

Preview
HTML

Designing UI

Design Meeting
Our main goal is to design a new mobile application for our client. The customer wants a clean & flat design.
Participants
1st January
Survey Report
assigned this task to Sarah
- Jquery
- React React React React
- Angular
- VUE
- Laravel
2nd January
Financial Reports
Click the button below to read financial reports
- Last Years's Profit : $20000
- This Years's Profit : $25000
- Last Years's Commission : $5000
- This Years's Commission : $7000
- This Years's Total Balance : $70000
5th January
Snacks

A Donut which straight gone to Your Tummy

I gaze longingly at the beautiful, perfect, plump donut. This is a delicately crafted piece of art. The mouthwatering mound of miraculous mush isn't able to escape my sight...read more

$5.00

10th January
Location
High

Final location for the company celebration.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem?

Due Date: 15th Jan

12th January
Gym Program
5:00 - 6:10AM

1.1 Hours Weekly

Rock's Gym

Gym Power

15th January
General Reserve
- Cash
  $500
- Credit Card
  $5000
- Investments
  $300
16th January
Ubuntu Server
Inactive
- IP Address
  
  192.654.8.566
- CPU
  
  4 Cores
- Ram
  
  500 MB
20th January
Online Store

Develop an online store of electronic devices for the provided layout, as well as develop a mobile version of it. The must be compatible with any CMS.

Developers

A

B

C

Deadline

20 Dec 2077

Budget

$50000

25th January

<ul class="timeline timeline-center mt-12">
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-brush-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
        <h6 class="card-title mb-0">Designing UI</h6>
        <div class="meta">
          <span class="badge rounded-pill bg-label-primary">Design</span>
          <span class="badge rounded-pill bg-label-success">Meeting</span>
        </div>
      </div>
      <div class="card-body">
        <p class="mb-2">
          Our main goal is to design a new mobile application for our
          client. The customer wants a clean & flat design.
        </p>
        <div class="d-flex justify-content-between align-items-center flex-wrap">
          <div>
            <p class="text-muted mb-2">Participants</p>
            <ul class="list-unstyled users-list d-flex align-items-center avatar-group">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy"
                class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="assets/img/avatars/5.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske"
                class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="assets/img/avatars/12.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol"
                class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="assets/img/avatars/6.png" alt="Avatar" />
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner"
                class="avatar avatar-xs pull-up">
                <img class="rounded-circle" src="assets/img/avatars/10.png" alt="Avatar" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">1st January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-question-mark"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <h6 class="card-header">Survey Report</h6>
      <div class="card-body">
        <div class="d-flex flex-wrap mb-6">
          <div>
            <div class="avatar avatar-xs me-2">
              <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
            </div>
          </div>
          <span>assigned this task to <span class="fw-medium">Sarah</span></span>
        </div>
        <ul class="list-unstyled">
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="assets/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress bg-label-danger" style="height: 6px;">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 48.7%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Jquery</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="assets/img/avatars/3.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress" style="height: 6px;">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 31.3%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>React</small>
              <small>React</small>
              <small>React</small>
              <small>React</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress bg-label-warning" style="height: 6px;">
                <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Angular</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="mb-3 w-100">
              <div class="progress bg-label-info" style="height: 6px;">
                <div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>VUE</small>
            </div>
          </li>
          <li class="d-flex">
            <div>
              <div class="avatar avatar-xs me-4">
                <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="w-100">
              <div class="progress bg-label-success" style="height: 6px;">
                <div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <small>Laravel</small>
            </div>
          </li>
        </ul>
      </div>
      <div class="timeline-event-time">2nd January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-line-chart-line"></i>
    </span>

    <div class="timeline-event card p-0" data-aos="fade-right">
      <h6 class="card-header
                     ">Financial Reports</h6>

      <div class="card-body">
        <p class="mb-2">Click the button below to read financial reports</p>
        <button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse"
          data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Show Report
        </button>
        <div class="collapse" id="collapseExample">
          <ul class="list-group list-group-flush mt-4">
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>Last Years's Profit : $20000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Profit : $25000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> Last Years's Commission : $5000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Commission : $7000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>
                This Years's Total Balance : $70000</span>
              <i class="ri-share-line cursor-pointer"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="timeline-event-time">5th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-warning" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-donut-chart-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <h6 class="card-header">Snacks</h6>
      <div class="card-body">
        <div class="d-flex flex-sm-row flex-column">
          <img src="assets/img/elements/13.jpg" class="rounded me-4 mb-sm-0 mb-2" alt="doughnut" height="64"
            width="64" />
          <div>
            <h6 class="mb-2">
              A Donut which straight gone to Your Tummy
            </h6>
            <p class="mb-2">
              I gaze longingly at the beautiful, perfect, plump donut. This
              is a delicately crafted piece of art. The mouthwatering mound
              of miraculous mush isn't able to escape my sight...<a href="javascript:void(0)">read more</a>
            </p>
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-fill text-warning"></i>
                <i class="ri-star-line"></i>
              </div>
              <div>
                <span class="fw-medium">$5.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">10th January</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-right">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-map-pin-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <i class="ri-map-pin-line"></i>
          <span class="align-middle">Location</span>
        </h6>
        <span class="badge rounded-pill bg-label-danger">High</span>
      </div>
      <div class="card-body py-0">
        <h6 class="mb-2">
          Final location for the company celebration.
        </h6>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas,
          quidem?
        </p>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="d-flex align-items-center flex-wrap cursor-pointer gap-4">
          <i class="ri-links-line"></i>
          <div class="position-relative">
            <i class="ri-chat-4-line"></i>
            <span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
          </div>
          <i class="ri-chat-4-line"></i>
        </div>
        <p class="mb-0">
          <span class="text-muted">Due Date:</span>
          15th Jan
        </p>
      </div>
      <div class="timeline-event-time">12th January</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-left">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-open-arm-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0">Gym Program</h6>
        <span class="text-muted">5:00 - 6:10AM</span>
      </div>
      <div class="card-body pb-4 pt-0">
        <div class="hours mb-2">
          <i class="ri-time-line"></i>
          <span>1.1 Hours</span>
          <i class="ri-arrow-left-right-line mx-2"></i>
          <span>Weekly</span>
        </div>
        <div class="location">
          <i class="ri-map-pin-line"></i>
          <span class="align-middle">Rock's Gym</span>
        </div>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="tags">
          <span class="badge rounded-pill bg-label-danger">Gym</span>
          <span class="badge rounded-pill bg-label-info">Power</span>
        </div>
        <div>
          <i class="ri-more-2-line cursor-pointer"></i>
        </div>
      </div>
      <div class="timeline-event-time">15th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-money-dollar-circle-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <h6 class="card-header">General Reserve</h6>
      <div class="card-body">
        <ul class="list-unstyled">
          <li class="d-flex justify-content-start align-items-center text-success mb-4">
            <i class="ri-money-dollar-circle-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted mb-1">Cash</small>
              <h5 class="mb-0">$500</h5>
            </div>
          </li>
          <li class="d-flex justify-content-start align-items-center text-info mb-4">
            <i class="ri-bank-card-2-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted mb-1">Credit Card</small>
              <h5 class="mb-0">$5000</h5>
            </div>
          </li>
          <li class="d-flex justify-content-start align-items-center text-primary">
            <i class="ri-line-chart-line ri-24px me-4"></i>
            <div class="ps-3 border-start">
              <small class="text-muted mb-1">Investments</small>
              <h5 class="mb-0">$300</h5>
            </div>
          </li>
        </ul>
      </div>
      <div class="timeline-event-time">16th January</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-server-fill"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <span class="align-middle">Ubuntu Server</span>
        </h6>
        <span class="badge rounded-pill bg-label-danger">Inactive</span>
      </div>
      <div class="card-body pb-2 pt-0">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="ri-global-line"></i>
              <span>IP Address</span>
            </div>
            <div>
              192.654.8.566
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="ri-cpu-line"></i>
              <span>CPU</span>
            </div>
            <div>
              4 Cores
            </div>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center ps-0">
            <div>
              <i class="ri-ram-2-fill"></i>
              <span>Ram</span>
            </div>
            <div>
              500 MB
            </div>
          </li>
        </ul>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <div class="server-icons">
          <i class="ri-share-line me-2"></i>
          <i class="ri-loop-left-line"></i>
        </div>
      </div>
      <div class="timeline-event-time">20th January</div>
    </div>
  </li>
  <li class="timeline-item pb-2">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="ri-store-2-line"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header d-flex justify-content-between">
        <h6 class="card-title mb-0"><span class="align-middle">Online Store</span></h6>
        <i class="ri-more-2-line cursor-pointer"></i>
      </div>
      <div class="card-body pt-0">
        <p>
          Develop an online store of electronic devices for the provided
          layout, as well as develop a mobile version of it. The must be
          compatible with any CMS.
        </p>
        <div class="d-flex flex-wrap flex-sm-row flex-column">
          <div class="mb-sm-0 mb-4 me-12">
            <p class="text-muted mb-2">Developers</p>
            <div class="d-flex align-items-center">
              <div class="avatar avatar-xs me-2">
                <span class="avatar-initial rounded-circle bg-label-primary">A</span>
              </div>
              <div class="avatar avatar-xs me-2">
                <span class="avatar-initial rounded-circle bg-label-success">B</span>
              </div>
              <div class="avatar avatar-xs">
                <span class="avatar-initial rounded-circle bg-label-danger">C</span>
              </div>
            </div>
          </div>
          <div class="mb-sm-0 mb-4 me-12">
            <p class="text-muted mb-2">Deadline</p>
            <p class="mb-0">20 Dec 2077</p>
          </div>
          <div>
            <p class="text-muted mb-2">Budget</p>
            <p class="mb-0">$50000</p>
          </div>
        </div>
      </div>
      <div class="timeline-event-time">25th January</div>
    </div>
  </li>
</ul>

Modifiers & Variables

Refer below mentioned for all the modifier classes of timeline

Class	Value
`class="timeline-item border-left-dashed"`	dashed
`class="timeline-point timeline-point-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark
`class="timeline-indicator timeline-indicator-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| dark
`class="timeline-event timeline-event-{style}"`	shadow

Refer below mentioned for all the variables of timeline

Variable	Description
`$timeline-border-color`	Variable for Timeline's border color
`$timeline-item-bg-color`	Variable for Timeline item default bg color
`$timeline-item-border-radius`	Variable for Timeline item's border radius
`$timeline-item-min-height`	Variable for Timeline item's min height
`$timeline-item-padding-x`	Variable for Timeline item's event x axis padding
`$timeline-item-padding-y`	Variable for Timeline item's event y axis padding
`$timeline-event-time-size`	Variable for Timeline event time font size
`$timeline-event-time-color`	Variable for Timeline event time color
`$timeline-point-size`	Variable for Timeline point size
`$timeline-indicator-size`	Variable for Timeline indicator with icon size
`$timeline-point-color`	Variable for point & indicator timeline's default color
`$timeline-point-indicator-bg-scale`	Variable for indicator timeline's background color scale

Animate On Scroll

Animate On Scroll lets you add animation your element when user scroll to it.

Usage

In order to use Animate on scroll on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/animate-on-scroll/animate-on-scroll.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/animate-on-scroll/animate-on-scroll.js" />

Example

Using Animate on scroll is really simple all you have to do is initialize it like this: AOS.init() and then you can pass data-aos="ANIMATION_NAME" to the element you want to animate.

This is a primary alert — check it out!

<div class="alert alert-primary" role="alert" data-aos="fade-up">
    This is a primary alert — check it out!
</div>

AOS.init({...options});