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

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

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

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