Order details
Bootstrap 5 Order details component
Responsive Order Details page built with the latest Bootstrap 5. eCommerce examples of shop pages with order summary, receipts, invoices, purchase lists & more.Basic example
Order details displayed inside of a popup. Check out the modal documentation to customize it further.
<section class="vh-100" style="background-color: #35558a;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100 text-center">
<div class="col">
<!-- Button trigger modal -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light btn-lg" data-mdb-modal-init
data-mdb-target="#exampleModal">
<i class="fas fa-info me-2"></i> Get information
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-start p-4">
<h5 class="modal-title text-uppercase mb-5" id="exampleModalLabel">Johnatan Miller</h5>
<h4 class="mb-5">Thanks for your order</h4>
<p class="mb-0">Payment summary</p>
<hr class="mt-2 mb-4"
style="height: 0; background-color: transparent; opacity: .75; border-top: 2px dashed #9e9e9e;">
<div class="d-flex justify-content-between">
<p class="fw-bold mb-0">Ether Chair(Qty:1)</p>
<p class="text-muted mb-0">$1750.00</p>
</div>
<div class="d-flex justify-content-between">
<p class="small mb-0">Shipping</p>
<p class="small mb-0">$175.00</p>
</div>
<div class="d-flex justify-content-between pb-1">
<p class="small">Tax</p>
<p class="small">$200.00</p>
</div>
<div class="d-flex justify-content-between">
<p class="fw-bold">Total</p>
<p class="fw-bold">$2125.00</p>
</div>
</div>
<div class="modal-footer d-flex justify-content-center border-top-0 py-4">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg mb-1" style="background-color: #35558a;">
Track your order
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Order details #2
Order details card with detailed payment information and delivery status presented with a stepper.
Purchase Reciept
Date
10 April 2021
Order No.
012j1gvs356c
BEATS Solo 3 Wireless Headphones
£299.99
Shipping
£33.00
£262.99
Tracking Order
-
Ordered
-
Shipped
-
On the way
-
Delivered
Want any help? Please contact us
<section class="h-100 h-custom" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-8 col-xl-6">
<div class="card border-top border-bottom border-3" style="border-color: #f37a27 !important;">
<div class="card-body p-5">
<p class="lead fw-bold mb-5" style="color: #f37a27;">Purchase Reciept</p>
<div class="row">
<div class="col mb-3">
<p class="small text-muted mb-1">Date</p>
<p>10 April 2021</p>
</div>
<div class="col mb-3">
<p class="small text-muted mb-1">Order No.</p>
<p>012j1gvs356c</p>
</div>
</div>
<div class="mx-n5 px-5 py-4" style="background-color: #f2f2f2;">
<div class="row">
<div class="col-md-8 col-lg-9">
<p>BEATS Solo 3 Wireless Headphones</p>
</div>
<div class="col-md-4 col-lg-3">
<p>£299.99</p>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-9">
<p class="mb-0">Shipping</p>
</div>
<div class="col-md-4 col-lg-3">
<p class="mb-0">£33.00</p>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-4 offset-md-8 col-lg-3 offset-lg-9">
<p class="lead fw-bold mb-0" style="color: #f37a27;">£262.99</p>
</div>
</div>
<p class="lead fw-bold mb-4 pb-2" style="color: #f37a27;">Tracking Order</p>
<div class="row">
<div class="col-lg-12">
<div class="horizontal-timeline">
<ul class="list-inline items d-flex justify-content-between">
<li class="list-inline-item items-list">
<p class="py-1 px-2 rounded text-white" style="background-color: #f37a27;">Ordered</p
class="py-1 px-2 rounded text-white" style="background-color: #f37a27;">
</li>
<li class="list-inline-item items-list">
<p class="py-1 px-2 rounded text-white" style="background-color: #f37a27;">Shipped</p
class="py-1 px-2 rounded text-white" style="background-color: #f37a27;">
</li>
<li class="list-inline-item items-list">
<p class="py-1 px-2 rounded text-white" style="background-color: #f37a27;">On the way
</p>
</li>
<li class="list-inline-item items-list text-end" style="margin-right: 8px;">
<p style="margin-right: -8px;">Delivered</p>
</li>
</ul>
</div>
</div>
</div>
<p class="mt-4 pt-2 mb-0">Want any help? <a href="#!" style="color: #f37a27;">Please contact
us</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
@media (min-width: 1025px) {
.h-custom {
height: 100vh !important;
}
}
.horizontal-timeline .items {
border-top: 2px solid #ddd;
}
.horizontal-timeline .items .items-list {
position: relative;
margin-right: 0;
}
.horizontal-timeline .items .items-list:before {
content: "";
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: #ddd;
top: 0;
margin-top: -5px;
}
.horizontal-timeline .items .items-list {
padding-top: 15px;
}
Order details #3
Order details page with product cards and delivery status presented with a progress bar.
Thanks for your Order, Anna!
Receipt
Receipt Voucher : 1KAU9-84UIL
Samsung Galaxy
White
Capacity: 64GB
Qty: 1
$499
Track Order
Out for delivary
Delivered
iPad
Pink rose
Capacity: 32GB
Qty: 1
$399
Track Order
Out for delivary
Delivered
Order Details
Total $898.00
Invoice Number : 788152
Discount $19.00
Invoice Date : 22 Dec,2019
GST 18% 123
Recepits Voucher : 18KU-62IIK
Delivery Charges Free
<section class="h-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-10 col-xl-8">
<div class="card" style="border-radius: 10px;">
<div class="card-header px-4 py-5">
<h5 class="text-muted mb-0">Thanks for your Order, <span style="color: #a8729a;">Anna</span>!</h5>
</div>
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<p class="lead fw-normal mb-0" style="color: #a8729a;">Receipt</p>
<p class="small text-muted mb-0">Receipt Voucher : 1KAU9-84UIL</p>
</div>
<div class="card shadow-0 border mb-4">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/13.webp"
class="img-fluid" alt="Phone">
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0">Samsung Galaxy</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">White</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Capacity: 64GB</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Qty: 1</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">$499</p>
</div>
</div>
<hr class="mb-4" style="background-color: #e0e0e0; opacity: 1;">
<div class="row d-flex align-items-center">
<div class="col-md-2">
<p class="text-muted mb-0 small">Track Order</p>
</div>
<div class="col-md-10">
<div class="progress" style="height: 6px; border-radius: 16px;">
<div class="progress-bar" role="progressbar"
style="width: 65%; border-radius: 16px; background-color: #a8729a;" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-around mb-1">
<p class="text-muted mt-1 mb-0 small ms-xl-5">Out for delivary</p>
<p class="text-muted mt-1 mb-0 small ms-xl-5">Delivered</p>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-0 border mb-4">
<div class="card-body">
<div class="row">
<div class="col-md-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
class="img-fluid" alt="Phone">
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0">iPad</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Pink rose</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Capacity: 32GB</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Qty: 1</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">$399</p>
</div>
</div>
<hr class="mb-4" style="background-color: #e0e0e0; opacity: 1;">
<div class="row d-flex align-items-center">
<div class="col-md-2">
<p class="text-muted mb-0 small">Track Order</p>
</div>
<div class="col-md-10">
<div class="progress" style="height: 6px; border-radius: 16px;">
<div class="progress-bar" role="progressbar"
style="width: 20%; border-radius: 16px; background-color: #a8729a;" aria-valuenow="20"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="d-flex justify-content-around mb-1">
<p class="text-muted mt-1 mb-0 small ms-xl-5">Out for delivary</p>
<p class="text-muted mt-1 mb-0 small ms-xl-5">Delivered</p>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between pt-2">
<p class="fw-bold mb-0">Order Details</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Total</span> $898.00</p>
</div>
<div class="d-flex justify-content-between pt-2">
<p class="text-muted mb-0">Invoice Number : 788152</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Discount</span> $19.00</p>
</div>
<div class="d-flex justify-content-between">
<p class="text-muted mb-0">Invoice Date : 22 Dec,2019</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">GST 18%</span> 123</p>
</div>
<div class="d-flex justify-content-between mb-5">
<p class="text-muted mb-0">Recepits Voucher : 18KU-62IIK</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Delivery Charges</span> Free</p>
</div>
</div>
<div class="card-footer border-0 px-4 py-5"
style="background-color: #a8729a; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
<h5 class="d-flex align-items-center justify-content-end text-white text-uppercase mb-0">Total
paid: <span class="h2 mb-0 ms-2">$1040</span></h5>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #cd9cf2;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to top left, rgba(205, 156, 242, 1), rgba(246, 243, 255, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to top left, rgba(205, 156, 242, 1), rgba(246, 243, 255, 1))
}
Order details #4
Order status popup with detailed shipper and address information.
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100 text-center">
<div class="col">
<!-- Button trigger modal -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg" data-mdb-modal-init
data-mdb-target="#exampleModal1">
Track your order
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content text-white" style="background-color: #6d5b98; border-radius: 10px;">
<div class="modal-header border-bottom-0">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close btn-close-white" data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body text-start px-4 pt-0 pb-4">
<div class="text-center">
<h5 class="mb-3">Order Status</h5>
<h5 class="mb-5">AWB Number-5335T5S</h5>
</div>
<div class="d-flex justify-content-between mb-5">
<div class="text-center">
<i class="fas fa-circle"></i>
<p>Order placed</p>
</div>
<div class="text-center">
<i class="fas fa-circle"></i>
<p>In Transit</p>
</div>
<div class="text-center">
<i class="fas fa-circle"></i>
<p class="lead fw-normal">Out of Delivery</p>
</div>
<div class="text-center">
<i class="fas fa-circle" style="color: #979595;"></i>
<p style="color: #979595;">Delivered</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 text-center">
<p class="lead fw-normal">Shipped with</p>
</div>
<div class="col-md-4 text-center">
<p class="lead fw-normal">UPS Expedited</p>
</div>
<div class="col-md-2 text-center">
<i class="fas fa-phone fa-lg"></i>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 text-center">
<p class="lead fw-normal">Estimated Delivery</p>
</div>
<div class="col-md-4 text-center">
<p class="lead fw-normal">02/12/2017</p>
</div>
<div class="col-md-2 text-center">
<i class="fas fa-envelope fa-lg"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Order details #5
A detailed product card with simple delivery status. Ideal for replacing item cards after purchase on shopping cart pages.
Order ID 1222528743
Place On 12,March 2019
Headphones Bose 35 II
Qt: 1 item
$ 299 via (COD)
Tracking Status on: 11:30pm, Today
- PLACED
- SHIPPED
- DELIVERED
<section class="vh-100 gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card card-stepper" style="border-radius: 16px;">
<div class="card-header p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-2"> Order ID <span class="fw-bold text-body">1222528743</span></p>
<p class="text-muted mb-0"> Place On <span class="fw-bold text-body">12,March 2019</span> </p>
</div>
<div>
<h6 class="mb-0"> <a href="#">View Details</a> </h6>
</div>
</div>
</div>
<div class="card-body p-4">
<div class="d-flex flex-row mb-4 pb-2">
<div class="flex-fill">
<h5 class="bold">Headphones Bose 35 II</h5>
<p class="text-muted"> Qt: 1 item</p>
<h4 class="mb-3"> $ 299 <span class="small text-muted"> via (COD) </span></h4>
<p class="text-muted">Tracking Status on: <span class="text-body">11:30pm, Today</span></p>
</div>
<div>
<img class="align-self-center img-fluid"
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp" width="250">
</div>
</div>
<ul id="progressbar-1" class="mx-0 mt-0 mb-5 px-0 pt-0 pb-4">
<li class="step0 active" id="step1"><span
style="margin-left: 22px; margin-top: 12px;">PLACED</span></li>
<li class="step0 active text-center" id="step2"><span>SHIPPED</span></li>
<li class="step0 text-muted text-end" id="step3"><span
style="margin-right: 22px;">DELIVERED</span></li>
</ul>
</div>
<div class="card-footer p-4">
<div class="d-flex justify-content-between">
<h5 class="fw-normal mb-0"><a href="#!">Track</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0"><a href="#!">Cancel</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0"><a href="#!">Pre-pay</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0"><a href="#!" class="text-muted"><i class="fas fa-ellipsis-v"></i></a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom-2 {
/* fallback for old browsers */
background: #a1c4fd;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(161, 196, 253, 1), rgba(194, 233, 251, 1))
}
#progressbar-1 {
color: #455A64;
}
#progressbar-1 li {
list-style-type: none;
font-size: 13px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar-1 #step1:before {
content: "1";
color: #fff;
width: 29px;
margin-left: 22px;
padding-left: 11px;
}
#progressbar-1 #step2:before {
content: "2";
color: #fff;
width: 29px;
}
#progressbar-1 #step3:before {
content: "3";
color: #fff;
width: 29px;
margin-right: 22px;
text-align: center;
}
#progressbar-1 li:before {
line-height: 29px;
display: block;
font-size: 12px;
background: #455A64;
border-radius: 50%;
margin: auto;
}
#progressbar-1 li:after {
content: '';
width: 121%;
height: 2px;
background: #455A64;
position: absolute;
left: 0%;
right: 0%;
top: 15px;
z-index: -1;
}
#progressbar-1 li:nth-child(2):after {
left: 50%
}
#progressbar-1 li:nth-child(1):after {
left: 25%;
width: 121%
}
#progressbar-1 li:nth-child(3):after {
left: 25%;
width: 50%;
}
#progressbar-1 li.active:before,
#progressbar-1 li.active:after {
background: #1266f1;
}
.card-stepper {
z-index: 0
}
Order details #6
Product delivery status card with invoice number and simple status tracking with slick icons.
INVOICE #Y34XDHR
Expected Arrival 01/12/19
USPS 234094567242423422898
Order
Processed
Order
Shipped
Order
En Route
Order
Arrived
<section class="vh-100" style="background-color: #8c9eff;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12">
<div class="card card-stepper" style="border-radius: 16px;">
<div class="card-body p-5">
<div class="d-flex justify-content-between align-items-center mb-5">
<div>
<h5 class="mb-0">INVOICE <span class="text-primary font-weight-bold">#Y34XDHR</span></h5>
</div>
<div class="text-end">
<p class="mb-0">Expected Arrival <span>01/12/19</span></p>
<p class="mb-0">USPS <span class="font-weight-bold">234094567242423422898</span></p>
</div>
</div>
<ul id="progressbar-2" class="d-flex justify-content-between mx-0 mt-0 mb-5 px-0 pt-0 pb-2">
<li class="step0 active text-center" id="step1"></li>
<li class="step0 active text-center" id="step2"></li>
<li class="step0 active text-center" id="step3"></li>
<li class="step0 text-muted text-end" id="step4"></li>
</ul>
<div class="d-flex justify-content-between">
<div class="d-lg-flex align-items-center">
<i class="fas fa-clipboard-list fa-3x me-lg-4 mb-3 mb-lg-0"></i>
<div>
<p class="fw-bold mb-1">Order</p>
<p class="fw-bold mb-0">Processed</p>
</div>
</div>
<div class="d-lg-flex align-items-center">
<i class="fas fa-box-open fa-3x me-lg-4 mb-3 mb-lg-0"></i>
<div>
<p class="fw-bold mb-1">Order</p>
<p class="fw-bold mb-0">Shipped</p>
</div>
</div>
<div class="d-lg-flex align-items-center">
<i class="fas fa-shipping-fast fa-3x me-lg-4 mb-3 mb-lg-0"></i>
<div>
<p class="fw-bold mb-1">Order</p>
<p class="fw-bold mb-0">En Route</p>
</div>
</div>
<div class="d-lg-flex align-items-center">
<i class="fas fa-home fa-3x me-lg-4 mb-3 mb-lg-0"></i>
<div>
<p class="fw-bold mb-1">Order</p>
<p class="fw-bold mb-0">Arrived</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.card-stepper {
z-index: 0
}
#progressbar-2 {
color: #455A64;
}
#progressbar-2 li {
list-style-type: none;
font-size: 13px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar-2 #step1:before {
content: '\f058';
font-family: "Font Awesome 5 Free";
color: #fff;
width: 37px;
margin-left: 0px;
padding-left: 0px;
}
#progressbar-2 #step2:before {
content: '\f058';
font-family: "Font Awesome 5 Free";
color: #fff;
width: 37px;
}
#progressbar-2 #step3:before {
content: '\f058';
font-family: "Font Awesome 5 Free";
color: #fff;
width: 37px;
margin-right: 0;
text-align: center;
}
#progressbar-2 #step4:before {
content: '\f111';
font-family: "Font Awesome 5 Free";
color: #fff;
width: 37px;
margin-right: 0;
text-align: center;
}
#progressbar-2 li:before {
line-height: 37px;
display: block;
font-size: 12px;
background: #c5cae9;
border-radius: 50%;
}
#progressbar-2 li:after {
content: '';
width: 100%;
height: 10px;
background: #c5cae9;
position: absolute;
left: 0%;
right: 0%;
top: 15px;
z-index: -1;
}
#progressbar-2 li:nth-child(1):after {
left: 1%;
width: 100%
}
#progressbar-2 li:nth-child(2):after {
left: 1%;
width: 100%;
}
#progressbar-2 li:nth-child(3):after {
left: 1%;
width: 100%;
background: #c5cae9 !important;
}
#progressbar-2 li:nth-child(4) {
left: 0;
width: 37px;
}
#progressbar-2 li:nth-child(4):after {
left: 0;
width: 0;
}
#progressbar-2 li.active:before,
#progressbar-2 li.active:after {
background: #6520ff;
}
Order details #7
Compact status card with a horizontal timeline.
Your order has been delivered
by DHFL on 21 Jan, 2020
15 MarOrder placed
15 MarOrder placed
15 MarOrder
Dispatched
15 MarOut for delivery
15 MarDelivered
<section class="vh-100" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col">
<div class="card card-stepper" style="border-radius: 10px;">
<div class="card-body p-4">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex flex-column">
<span class="lead fw-normal">Your order has been delivered</span>
<span class="text-muted small">by DHFL on 21 Jan, 2020</span>
</div>
<div>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" type="button">Track order details</button>
</div>
</div>
<hr class="my-4">
<div class="d-flex flex-row justify-content-between align-items-center align-content-center">
<span class="dot"></span>
<hr class="flex-fill track-line"><span class="dot"></span>
<hr class="flex-fill track-line"><span class="dot"></span>
<hr class="flex-fill track-line"><span class="dot"></span>
<hr class="flex-fill track-line"><span
class="d-flex justify-content-center align-items-center big-dot dot">
<i class="fa fa-check text-white"></i></span>
</div>
<div class="d-flex flex-row justify-content-between align-items-center">
<div class="d-flex flex-column align-items-start"><span>15 Mar</span><span>Order placed</span>
</div>
<div class="d-flex flex-column justify-content-center"><span>15 Mar</span><span>Order
placed</span></div>
<div class="d-flex flex-column justify-content-center align-items-center"><span>15
Mar</span><span>Order Dispatched</span></div>
<div class="d-flex flex-column align-items-center"><span>15 Mar</span><span>Out for
delivery</span></div>
<div class="d-flex flex-column align-items-end"><span>15 Mar</span><span>Delivered</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.track-line {
height: 2px !important;
background-color: #488978;
opacity: 1;
}
.dot {
height: 10px;
width: 10px;
margin-left: 3px;
margin-right: 3px;
margin-top: 0px;
background-color: #488978;
border-radius: 50%;
display: inline-block
}
.big-dot {
height: 25px;
width: 25px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
background-color: #488978;
border-radius: 50%;
display: inline-block;
}
.big-dot i {
font-size: 12px;
}
.card-stepper {
z-index: 0
}