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#

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 , Indicator Timeline with Icon and Advanced Indicator Timeline with Icon. To create a point timeline, use .timeline-point-primary with .timeline-point.To create a indicator timeline with icon, use .timeline-indicator-primary with .timeline-indicator. To create an advanced indicator timeline with icon, use .timeline-indicator-advanced and You can further customize the indicator with native Bootstrap classes.

You can add background color to .timeline-item by adding .timeline-item-{color} or to create a transparent timeline event, use .timeline-item-transparent. 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

Get on the flight
3rd October

Charles de Gaulle Airport, Paris Heathrow Airport, London

6:30 AM

bookingCard.pdf
Design Review
4th October

Weekly review of freshly prepared design for our new application.

New Application
Sold Puma POPX Blue Color
5th October

PUMA presents the latest shoes from its collection. Light & comfortable made with highly durable material.

Customer
Micheal Scott

Price
$375.00

Quantity
1
Interview Schedule
6th October

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quos, voluptates voluptas rem veniam expedita.

Rebecca Godman
Javascript Developer
2 Notifications
7th October
- Commented on your post.
- Dwight repaid you
  30 minutes ago
  
  $20

<ul class="timeline mt-3">
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-primary"></span>
    <div class="timeline-event">
      <div class="timeline-header border-bottom mb-3">
        <h6 class="mb-0">Get on the flight</h6>
        <small class="text-muted">3rd October</small>
      </div>
      <div class="d-flex justify-content-between flex-wrap mb-2">
        <div>
          <span>Charles de Gaulle Airport, Paris</span>
          <i class="bx bx-right-arrow-alt scaleX-n1-rtl mx-3"></i>
          <span>Heathrow Airport, London</span>
        </div>
        <div>
          <span class="text-muted">6:30 AM</span>
        </div>
      </div>
      <a href="javascript:void(0)">
        <i class="bx bx-link"></i>
        bookingCard.pdf
      </a>
    </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-sm-0 mb-3">
        <h6 class="mb-0">Design Review</h6>
        <small class="text-muted">4th October</small>
      </div>
      <p>
        Weekly review of freshly prepared design for our new
        application.
      </p>
      <div class="d-flex justify-content-between">
        <h6>New Application</h6>
        <div class="d-flex">
          <div class="avatar avatar-xs me-2">
            <img src="../../assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div class="avatar avatar-xs">
            <img src="../../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-danger"></span>
    <div class="timeline-event">
      <div class="d-flex flex-sm-row flex-column">
        <img src="../../assets/img/elements/16.jpg" class="rounded me-3" alt="Shoe img" height="62" width="62" />
        <div>
          <div class="timeline-header flex-wrap mb-2 mt-3 mt-sm-0">
            <h6 class="mb-0">Sold Puma POPX Blue Color</h6>
            <small class="text-muted">5th October</small>
          </div>
          <p>
            PUMA presents the latest shoes from its collection. Light &
            comfortable made with highly durable material.
          </p>
        </div>
      </div>
      <div class="d-flex justify-content-between flex-wrap flex-sm-row flex-column text-sm-center">
        <div class="customer mb-sm-0 mb-2">
          <p class="mb-0">Customer</p>
          <span class="text-muted">Micheal Scott</span>
        </div>
        <div class="price mb-sm-0 mb-2">
          <p class="mb-0">Price</p>
          <span class="text-muted">$375.00</span>
        </div>
        <div class="price">
          <p class="mb-0">Quantity</p>
          <span class="text-muted">1</span>
        </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">
        <h6 class="mb-0">Interview Schedule</h6>
        <small class="text-muted">6th October</small>
      </div>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Possimus quos, voluptates voluptas rem veniam expedita.
      </p>
      <hr />
      <div class="d-flex justify-content-between flex-wrap gap-2">
        <div class="d-flex flex-wrap">
          <div class="avatar me-3">
            <img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0">Rebecca Godman</p>
            <span class="text-muted">Javascript Developer</span>
          </div>
        </div>
        <div class="d-flex flex-wrap align-items-center cursor-pointer">
          <i class="bx bx-message me-2"></i>
          <i class="bx bx-phone-call"></i>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-transparent">
    <span class="timeline-point timeline-point-warning"></span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">2 Notifications</h6>
        <small class="text-muted">7th October</small>
      </div>
      <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 my-3 me-2">
              <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>
            </ul>
            <span>Commented on your post.</span>
          </div>
          <button class="btn btn-primary btn-sm my-sm-0 my-3">
            View
          </button>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap pb-0 px-0">
          <div class="d-flex align-items-center">
            <img src="../../assets/img/avatars/4.png" class="rounded-circle me-3" alt="avatar" height="24" width="24" />
            <div class="user-info">
              <p class="my-0">Dwight repaid you</p>
              <span class="text-muted">30 minutes ago</span>
            </div>
          </div>
          <h5 class="mb-0">$20</h5>
        </li>
      </ul>
    </div>
  </li>
  <li class="timeline-end-indicator">
    <i class="bx bx-check-circle"></i>
  </li>
</ul>

Here is timeline border mixin which allow you to easily change timeline's border style. We have a SASS object which takes in border styles which then can be used to change border style according to class.

$timeline-line-border-styles: (solid : solid, dotted: dotted, dashed: dashed, hidden: none);

@mixin template-timeline-border-style(border-style)

@include template-timeline-border-style("solid");

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-5">
  <li class="timeline-item">
    <span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
      <i class="bx bx-paint"></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="bx bx-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-4">
          <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-3">
                <img src="../../assets/img/avatars/2.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-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-3">
                <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-3">
                <img src="../../assets/img/avatars/4.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-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-3">
                <img src="../../assets/img/avatars/5.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-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-3">
                <img src="../../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
              </div>
            </div>
            <div class="w-100">
              <div class="progress" 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="bx bx-line-chart"></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-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-3">
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>Last Years's Profit : <span class="fw-medium">$20000</span></span>
              <i class="bx bx-share-alt cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Profit : <span class="fw-medium">$25000</span></span>
              <i class="bx bx-share-alt cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> Last Years's Commission : <span class="fw-medium">$5000</span></span>
              <i class="bx bx-share-alt cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span> This Years's Commission : <span class="fw-medium">$7000</span></span>
              <i class="bx bx-share-alt cursor-pointer"></i>
            </li>
            <li class="list-group-item d-flex justify-content-between flex-wrap">
              <span>
                This Years's Total Balance : <span class="fw-medium">$70000</span></span>
              <i class="bx bx-share-alt 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="bx bx-doughnut-chart"></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-3 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="bx bxs-star text-warning"></i>
                <i class="bx bxs-star text-warning"></i>
                <i class="bx bxs-star text-warning"></i>
                <i class="bx bxs-star text-warning"></i>
                <i class="bx bx-star"></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="bx bx-map"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0">
          <i class="bx bx-map"></i>
          <span class="align-middle">Location</span>
        </h6>
        <span class="badge rounded-pill bg-label-danger">High</span>
      </div>
      <div class="card-body pb-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-3">
          <i class="bx bx-link"></i>
          <div class="position-relative">
            <i class="bx bx-message"></i>
            <span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
          </div>
          <i class="bx bx-user"></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="bx bx-dumbbell"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header border-0 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-0">
        <div class="hours mb-2">
          <i class="bx bx-time"></i>
          <span>1.1 Hours</span>
          <i class="bx bx-transfer mx-2"></i>
          <span>Weekly</span>
        </div>
        <div class="location">
          <i class="bx bx-map"></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="bx bx-dots-vertical-rounded 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="bx bx-dollar"></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-3">
            <i class="bx bx-dollar bx-sm me-3"></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-3">
            <i class="bx bx-credit-card bx-sm me-3"></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="bx bx-line-chart bx-sm me-3"></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="bx bx-server"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-left">
      <div class="card-header border-0 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-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="bx bx-globe"></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="bx bx-chip"></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="bx bx-server"></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="bx bx-share-alt me-2"></i>
          <i class="bx bx-sync"></i>
        </div>
        <label class="switch me-n2">
          <input type="checkbox" class="switch-input" />
          <span class="switch-toggle-slider">
            <span class="switch-on"></span>
            <span class="switch-off"></span>
          </span>
          <span class="switch-label"></span>
        </label>
      </div>
      <div class="timeline-event-time">20th January</div>
    </div>
  </li>
  <li class="timeline-item border-0 pb-0">
    <span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
      <i class="bx bx-store"></i>
    </span>
    <div class="timeline-event card p-0" data-aos="fade-right">
      <div class="card-header border-0 d-flex justify-content-between">
        <h6 class="card-title mb-0"><span class="align-middle">Online Store</span></h6>
        <i class="bx bx-dots-vertical-rounded cursor-pointer"></i>
      </div>
      <div class="card-body pb-3 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-3 me-5">
            <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-3 me-5">
            <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>

Advanced#

Create an indicator to indicate timeline's end using class .timeline-end-indicator

Preview
HTML

Get on the flight
3rd October

Charles de Gaulle Airport, Paris Heathrow Airport, London

6:30 AM

bookingCard.pdf
Design Review
4th October

Weekly review of freshly prepared design for our new application.

New Application
Sold Puma POPX Blue Color
5th October

PUMA presents the latest shoes from its collection. Light & comfortable made with highly durable material.

Customer
Micheal Scott

Price
$375.00

Quantity
1
Interview Schedule
6th October

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quos, voluptates voluptas rem veniam expedita.

Rebecca Godman
Javascript Developer
2 Notifications
7th October
- Commented on your post.
- Dwight repaid you
  30 minutes ago
  
  $20

                <ul class="timeline timeline-dashed">
  <li class="timeline-item timeline-item-primary mb-4">
    <span class="timeline-indicator timeline-indicator-primary">
      <i class="bx bx-paper-plane"></i>
    </span>
    <div class="timeline-event">
      <div class="timeline-header border-bottom mb-3">
        <h6 class="mb-0">Get on the flight</h6>
        <span class="text-muted">3rd October</span>
      </div>
      <div class="d-flex justify-content-between flex-wrap mb-2">
        <div>
          <span>Charles de Gaulle Airport, Paris</span>
          <i class="bx bx-right-arrow-alt mx-3"></i>
          <span>Heathrow Airport, London</span>
        </div>
        <div>
          <span>6:30 AM</span>
        </div>
      </div>
      <a href="javascript:void(0)">
        <i class="bx bx-link"></i>
        bookingCard.pdf
      </a>
    </div>
  </li>
  <li class="timeline-item timeline-item-success mb-4">
    <span class="timeline-indicator timeline-indicator-success">
      <i class="bx bx-paint"></i>
    </span>
    <div class="timeline-event">
      <div class="timeline-header mb-sm-0 mb-3">
        <h6 class="mb-0">Design Review</h6>
        <span class="text-muted">4th October</span>
      </div>
      <p>
        Weekly review of freshly prepared design for our new
        application.
      </p>
      <div class="d-flex justify-content-between">
        <h6>New Application</h6>
        <div class="d-flex">
          <div class="avatar avatar-xs me-2">
            <img src="assets/img/avatars/4.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div class="avatar avatar-xs">
            <img src="assets/img/avatars/5.png" alt="Avatar" class="rounded-circle" />
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-danger mb-4">
    <span class="timeline-indicator timeline-indicator-danger">
      <i class="bx bx-shopping-bag"></i>
    </span>
    <div class="timeline-event">
      <div class="d-flex flex-sm-row flex-column">
        <img src="assets/img/elements/16.jpg" class="rounded me-3" alt="Shoe img" height="62" width="62" />
        <div class="mt-sm-0 mt-3">
          <div class="timeline-header flex-wrap mb-2">
            <h6 class="mb-0">Sold Puma POPX Blue Color</h6>
            <span class="text-muted">5th October</span>
          </div>
          <p>
            PUMA presents the latest shoes from its collection. Light &
            comfortable made with highly durable material.
          </p>
        </div>
      </div>
      <div class="d-flex justify-content-between flex-wrap flex-sm-row flex-column text-center">
        <div class="mb-sm-0 mb-2">
          <p class="mb-0">Customer</p>
          <span class="text-muted">Micheal Scott</span>
        </div>
        <div class="mb-sm-0 mb-2">
          <p class="mb-0">Price</p>
          <span class="text-muted">$375.00</span>
        </div>
        <div>
          <p class="mb-0">Quantity</p>
          <span class="text-muted">1</span>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-info mb-4">
    <span class="timeline-indicator timeline-indicator-info">
      <i class="bx bx-user-circle"></i>
    </span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">Interview Schedule</h6>
        <span class="text-muted">6th October</span>
      </div>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Possimus quos, voluptates voluptas rem veniam expedita.
      </p>
      <hr />
      <div class="d-flex justify-content-between flex-wrap">
        <div class="d-flex flex-wrap">
          <div class="avatar me-3">
            <img src="assets/img/avatars/6.png" alt="Avatar" class="rounded-circle" />
          </div>
          <div>
            <p class="mb-0">Rebecca Godman</p>
            <span class="text-muted">Javascript Developer</span>
          </div>
        </div>
        <div class="d-flex flex-wrap align-items-centers cursor-pointer mt-sm-0 mt-2">
          <i class="bx bx-message me-2"></i>
          <i class="bx bx-phone-call"></i>
        </div>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-item-dark mb-4">
    <span class="timeline-indicator timeline-indicator-dark">
      <i class="bx bx-bell"></i>
    </span>
    <div class="timeline-event">
      <div class="timeline-header">
        <h6 class="mb-0">2 Notifications</h6>
        <span class="text-muted">7th October</span>
      </div>
      <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 mb-3 mt-3 me-2">
              <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>
            </ul>
            <span>Commented on your post.</span>
          </div>
          <button class="btn btn-primary btn-sm my-sm-0 my-3">
            View
          </button>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap pb-0 px-0">
          <div class="d-flex flex-sm-row flex-column align-items-center">
            <img src="assets/img/avatars/4.png" class="rounded-circle me-3" alt="avatar" height="24" width="24" />
            <div class="user-info">
              <p class="my-0">Dwight repaid you</p>
              <span class="text-muted">30 minutes ago</span>
            </div>
          </div>
          <h5 class="mb-0">$20</h5>
        </li>
      </ul>
    </div>
  </li>
  <li class="timeline-end-indicator">
    <i class="bx bx-check-circle"></i>
  </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-item timeline-item-{color}"`	primary \| secondary \| success \| danger \| warning \| info \| light \| dark \| transparent
`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
`class="timeline-indicator-advanced timeline-indicator-{color}"`	Only icon as indicator (can be customized with bootstrap classes)

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-icon-font-size`	Variable for Timeline icon indicator's font size
`$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-event-shadow`	Variable for Timeline event shadow
`$timeline-point-size`	Variable for Timeline point size
`$timeline-indicator-size`	Variable for Timeline indicator with icon size
`$timeline-point-indicator-color`	Variable for point & indicator timeline's default color
`$timeline-end-indicator-font-size`	Variable for Timeline end indicator font size
`$timeline-point-indicator-bg-scale`	Variable for Timeline point indicator background opacity

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});