Responsive Bootstrap 5 Order Tracking Vertical
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vertical process flow Example </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-md-12 col-lg-12">
<div id="tracking-pre"></div>
<div id="tracking">
<div class="tracking-list">
<div class="tracking-item">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Order Placed<span>09 Aug 2025, 10:00am</span></div>
</div>
<div class="tracking-item">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Order Confirmed<span>09 Aug 2025, 10:30am</span></div>
</div>
<div class="tracking-item">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Packed the product<span>09 Aug 2025, 12:00pm</span></div>
</div>
<div class="tracking-item">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Arrived in the warehouse<span>10 Aug 2025, 02:00pm</span></div>
</div>
<div class="tracking-item">
<div class="tracking-icon status-current blinker">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Near by Courier facility<span>10 Aug 2025, 03:00pm</span></div>
</div>
<div class="tracking-item-pending">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Out for Delivery<span>12 Aug 2025, 05:00pm</span></div>
</div>
<div class="tracking-item-pending">
<div class="tracking-icon status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z">
</path>
</svg>
</div>
<div class="tracking-date"><img
src="https://raw.githubusercontent.com/shajo/portfolio/a02c5579c3ebe185bb1fc085909c582bf5fad802/delivery.svg"
class="img-responsive" alt="order-placed" /></div>
<div class="tracking-content">Delivered<span>12 Aug 2025, 09:00pm</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#tracking {
background: #fff
}
.tracking-detail {
padding: 3rem 0;
}
#tracking {
margin-bottom: 1rem;
}
[class*="tracking-status-"] p {
margin: 0;
font-size: 1.1rem;
color: #fff;
text-transform: uppercase;
text-align: center;
}
[class*="tracking-status-"] {
padding: 1.6rem 0;
}
.tracking-list {
border: 1px solid #e5e5e5;
}
.tracking-item {
border-left: 4px solid #00ba0d;
position: relative;
padding: 2rem 1.5rem 0.5rem 2.5rem;
font-size: 0.9rem;
margin-left: 3rem;
min-height: 5rem;
}
.tracking-item:last-child {
padding-bottom: 4rem;
}
.tracking-item .tracking-date {
margin-bottom: 0.5rem;
}
.tracking-item .tracking-date span {
color: #888;
font-size: 85%;
padding-left: 0.4rem;
}
.tracking-item .tracking-content {
padding: 0.5rem 0.8rem;
background-color: #f4f4f4;
border-radius: 0.5rem;
}
.tracking-item .tracking-content span {
display: block;
color: #767676;
font-size: 13px;
}
.tracking-item .tracking-icon {
position: absolute;
left: -0.7rem;
width: 1.1rem;
height: 1.1rem;
text-align: center;
border-radius: 50%;
font-size: 1.1rem;
background-color: #fff;
color: #fff;
}
.tracking-item-pending {
border-left: 4px solid #d6d6d6;
position: relative;
padding: 2rem 1.5rem 0.5rem 2.5rem;
font-size: 0.9rem;
margin-left: 3rem;
min-height: 5rem;
}
.tracking-item-pending:last-child {
padding-bottom: 4rem;
}
.tracking-item-pending .tracking-date {
margin-bottom: 0.5rem;
}
.tracking-item-pending .tracking-date span {
color: #888;
font-size: 85%;
padding-left: 0.4rem;
}
.tracking-item-pending .tracking-content {
padding: 0.5rem 0.8rem;
background-color: #f4f4f4;
border-radius: 0.5rem;
}
.tracking-item-pending .tracking-content span {
display: block;
color: #767676;
font-size: 13px;
}
.tracking-item-pending .tracking-icon {
line-height: 2.6rem;
position: absolute;
left: -0.7rem;
width: 1.1rem;
height: 1.1rem;
text-align: center;
border-radius: 50%;
font-size: 1.1rem;
color: #d6d6d6;
}
.tracking-item-pending .tracking-content {
font-weight: 600;
font-size: 17px;
}
.tracking-item .tracking-icon.status-current {
width: 1.9rem;
height: 1.9rem;
left: -1.1rem;
}
.tracking-item .tracking-icon.status-intransit {
color: #00ba0d;
font-size: 0.6rem;
}
.tracking-item .tracking-icon.status-current {
color: #00ba0d;
font-size: 0.6rem;
}
@media (min-width: 992px) {
.tracking-item {
margin-left: 10rem;
}
.tracking-item .tracking-date {
position: absolute;
left: -10rem;
width: 7.5rem;
text-align: right;
}
.tracking-item .tracking-date span {
display: block;
}
.tracking-item .tracking-content {
padding: 0;
background-color: transparent;
}
.tracking-item-pending {
margin-left: 10rem;
}
.tracking-item-pending .tracking-date {
position: absolute;
left: -10rem;
width: 7.5rem;
text-align: right;
}
.tracking-item-pending .tracking-date span {
display: block;
}
.tracking-item-pending .tracking-content {
padding: 0;
background-color: transparent;
}
}
.tracking-item .tracking-content {
font-weight: 600;
font-size: 17px;
}
.blinker {
border: 7px solid #e9f8ea;
animation: blink 1s;
animation-iteration-count: infinite;
}
@keyframes blink {
50% {
border-color: #fff;
}
}
//Doesn't require any JS.
This Bootstrap 5 snippet provides a visually appealing and interactive vertical order tracking component. It displays the order status and progress at each stage of the delivery process, offering a clear and informative overview for users. The component is fully responsive, ensuring a seamless user experience across different devices.
Key Features:
- Responsive Design: The order tracking component adapts to various screen sizes, providing a consistent user experience on desktops, tablets, and mobile devices.
- Clear Status Indicators: The component visually represents each stage of the order process using icons, checkmarks, or other indicators.
- Timelines: Displays the timeline for each stage of the order, including dates and times for better context.
- Customizable Styling: Easily modify the appearance of the order tracking component using Bootstrap's CSS classes to match your website's design and branding.
Implementation:
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the order tracking component, including the container, timeline markers, and status information.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the order tracking component and its elements, such as order-tracking, timeline, timeline-item, timeline-dot, timeline-content, and any other relevant classes.
- Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and behavior of the order tracking component according to your specific requirements.
Responsive Tailwind CSS Stepper Component
Dark Themed Bootstrap 5 Accordion with Custom Icons
Fully Responsive CSS Price Table Grid and Plan Details
Responsive TailwindCSS Footer with Gallery Section
Bootstrap 5 Alerts for Error, Warning, Info, and Success
Interactive MCQ Container with CSS & JavaScript
Responsive Tailwind CSS Testimonial Slider with Alpine.js Functionality
Bootstrap 5 Full Height Swiper Slider with Smooth Transitions
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
