Free Bootstrap 5 utility snippet — Bootstrap 5 ecommerce order details with payment and order…. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
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"> × </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>
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.