Order details

Bootstrap 5 Order details component

Responsive Order Details built with the latest Bootstrap 5. Multiple eCommerce examples and ready-to-use shop pages. Various design and functionalities.


Basic example


          <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" class="btn btn-light btn-lg" data-mdb-toggle="modal" 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" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body text-start text-black p-4">
                          <h5 class="modal-title text-uppercase mb-5" id="exampleModalLabel">Johnatan Miller</h5>
                          <h4 class="mb-5" style="color: #35558a;">Thanks for your order</h4>
                          <p class="mb-0" style="color: #35558a;">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" style="color: #35558a;">$2125.00</p>
                          </div>
          
                        </div>
                        <div class="modal-footer d-flex justify-content-center border-top-0 py-4">
                          <button type="button" 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

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

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


          <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.jpg" 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.jpg" 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


          <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" class="btn btn-primary btn-lg" data-mdb-toggle="modal" 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" 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

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.jpg" 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

ORDER #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 text-black" 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">ORDER <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

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