Bootstrap 5 ecommerce order details with payment and order…

1<div class="d-flex flex-column justify-content-center align-items-center" id="order-heading">
2    <div class="text-uppercase">
3        <p>Order detail</p>
4    </div>
5    <div class="h4">Tuesday, December 08, 2020</div>
6    <div class="pt-1">
7        <p>Order #12615 is currently<b class="text-dark"> processing</b></p>
8    </div>
9    <div class="btn btn-close text-white"> &times; </div>
10</div>
11<div class="wrapper bg-white">
12    <div class="table-responsive">
13        <table class="table table-borderless">
14            <thead>
15                <tr class="text-uppercase text-muted">
16                    <th scope="col">product</th>
17                    <th scope="col" class="text-end">total</th>
18                </tr>
19            </thead>
20            <tbody>
21                <tr>
22                    <th scope="row">Babyblends: 1meal/day</th>
23                    <td class="text-end"><b>$69.86</b></td>
24                </tr>
25            </tbody>
26        </table>
27    </div>
28    <div class="d-flex justify-content-start align-items-center list py-1">
29        <div><b>1px</b></div>
30        <div class="mx-3"> <img src="https://images.pexels.com/photos/206959/pexels-photo-206959.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="apple" class="rounded-circle" width="30" height="30"> </div>
31        <div class="order-item">Apple</div>
32    </div>
33    <div class="d-flex justify-content-start align-items-center list my-2 py-1">
34        <div><b>4px</b></div>
35        <div class="mx-3"> <img src="https://images.unsplash.com/photo-1602081593819-65e7a8cee0dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="apple" class="rounded-circle" width="30" height="30"> </div>
36        <div class="order-item">Mango</div>
37    </div>
38    <div class="d-flex justify-content-start align-items-center list my-2 py-1">
39        <div><b>2px</b></div>
40        <div class="mx-3"> <img src="https://images.unsplash.com/photo-1584183187885-071d53d42531?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="apple" class="rounded-circle" width="30" height="30"> </div>
41        <div class="order-item">Carrot Apple Ginger</div>
42    </div>
43    <div class="d-flex justify-content-start align-items-center list my-2 py-1">
44        <div><b>3px</b></div>
45        <div class="mx-3"> <img src="https://images.unsplash.com/photo-1602096934878-5028bf10ca50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="apple" class="rounded-circle" width="30" height="30"> </div>
46        <div class="order-item">Pear</div>
47    </div>
48    <div class="pt-2 border-bottom mb-3"></div>
49    <div class="d-flex justify-content-start align-items-center ps-3">
50        <div class="text-muted">Payment Method</div>
51        <div class="ms-auto"> <img src="https://www.freepnglogos.com/uploads/mastercard-png/mastercard-logo-logok-15.png" alt="" width="30" height="30"> <label>Mastercard ******5342</label> </div>
52    </div>
53    <div class="d-flex justify-content-start align-items-center py-1 ps-3">
54        <div class="text-muted">Shipping</div>
55        <div class="ms-auto"> <label>Free</label> </div>
56    </div>
57    <div class="d-flex justify-content-start align-items-center pb-4 ps-3 border-bottom">
58        <div class="text-muted"> <button class="text-white btn">50% Discount</button> </div>
59        <div class="ms-auto price"> -$34.94 </div>
60    </div>
61    <div class="d-flex justify-content-start align-items-center ps-3 py-3 mb-4 border-bottom">
62        <div class="text-muted"> Today's Total </div>
63        <div class="ms-auto h5"> $34.94 </div>
64    </div>
65    <div class="row border rounded p-1 my-3">
66        <div class="col-md-6 py-3">
67            <div class="d-flex flex-column align-items start"> <b>Billing Address</b>
68                <p class="text-justify pt-2">James Thompson, 356 Jonathon Apt.220,</p>
69                <p class="text-justify">New York</p>
70            </div>
71        </div>
72        <div class="col-md-6 py-3">
73            <div class="d-flex flex-column align-items start"> <b>Shipping Address</b>
74                <p class="text-justify pt-2">James Thompson, 356 Jonathon Apt.220,</p>
75                <p class="text-justify">New York</p>
76            </div>
77        </div>
78    </div>
79    <div class="ps-3 font-weight-bold">Related Subsriptions</div>
80    <div class="d-sm-flex justify-content-between rounded my-3 subscriptions">
81        <div> <b>#9632</b> </div>
82        <div>December 08, 2020</div>
83        <div>Status: Processing</div>
84        <div> Total: <b> $68.8 for 10 items</b> </div>
85    </div>
86</div>