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.

Edit in sandbox 
<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

Edit in sandbox 
<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

Phone

Samsung Galaxy

White

Capacity: 64GB

Qty: 1

$499

Track Order

Out for delivary

Delivered

Phone

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

Total paid: $1040
Edit in sandbox 
<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.

Edit in sandbox 
<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
Track
Cancel
Pre-pay
Edit in sandbox 
<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

Edit in sandbox 
<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
Edit in sandbox 
<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
}