→ Kemaya m
→ Shopping cart design using Bootstrap 5

Shopping cart design using Bootstrap 5

With order summary and promo code form

This bootstrap css example is contributed by Kemaya m, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Shopping cart eCommerce

Author Kemaya m

25.6k

v.5.3

Fork Fullscreen

<div class="container py-5">
    <h1 class="mb-5">Your Shopping Cart</h1>
    <div class="row">
        <div class="col-lg-8">
            
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row cart-item mb-3">
                        <div class="col-md-3">
                            <img src="https://via.placeholder.com/100" alt="Product 1" class="img-fluid rounded">
                        </div>
                        <div class="col-md-5">
                            <h5 class="card-title">Product 1</h5>
                            <p class="text-muted">Category: Electronics</p>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <button class="btn btn-outline-secondary btn-sm" type="button">-</button>
                                <input style="max-width:100px" type="text" class="form-control  form-control-sm text-center quantity-input" value="1">
                                <button class="btn btn-outline-secondary btn-sm" type="button">+</button>
                            </div>
                        </div>
                        <div class="col-md-2 text-end">
                            <p class="fw-bold">$99.99</p>
                            <button class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i>
                                </button>
                        </div>
                    </div>
                    <hr>
                    <div class="row cart-item">
                        <div class="col-md-3">
                            <img src="https://via.placeholder.com/100" alt="Product 2" class="img-fluid rounded">
                        </div>
                        <div class="col-md-5">
                            <h5 class="card-title">Product 2</h5>
                            <p class="text-muted">Category: Clothing</p>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group">
                                <button class="btn btn-outline-secondary btn-sm" type="button">-</button>
                                <input style="max-width:100px" type="text" class="form-control form-control-sm text-center quantity-input" value="2">
                                <button class="btn btn-outline-secondary btn-sm" type="button">+</button>
                            </div>
                        </div>
                        <div class="col-md-2 text-end">
                            <p class="fw-bold">$49.99</p>
                            <button class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i>
                                </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-start mb-4">
                <a href="#" class="btn btn-outline-primary">
                    <i class="bi bi-arrow-left me-2"></i>Continue Shopping
                </a>
            </div>
        </div>
        <div class="col-lg-4">
            
            <div class="card cart-summary">
                <div class="card-body">
                    <h5 class="card-title mb-4">Order Summary</h5>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Subtotal</span>
                        <span>$199.97</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Shipping</span>
                        <span>$10.00</span>
                    </div>
                    <div class="d-flex justify-content-between mb-3">
                        <span>Tax</span>
                        <span>$20.00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mb-4">
                        <strong>Total</strong>
                        <strong>$229.97</strong>
                    </div>
                    <button class="btn btn-primary w-100">Proceed to Checkout</button>
                </div>
            </div>
            
            <div class="card mt-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">Apply Promo Code</h5>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Enter promo code">
                        <button class="btn btn-outline-secondary" type="button">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Interactive Shop Catalog Layout
shopping interface with wishlist functionality and dynamic filtering

Author:
Mason Ashford

1 year ago

7.9k

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

2 years ago

36.9k

v.5.3
Minimal shopping cart

Author:
Valeria González

1 year ago

3.4k

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

1 year ago

3k

v.5.3
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

1 year ago

5.2k

v.5.3
Clean Commerce Cart Design
A sleek shopping cart interface with quantity controls and real-time order summary

Author:
Mason Ashford

1 year ago

6.8k

v.5.3
404 page template
with an animated illustration and a button to redirect to the homepage

Author:
Anonymous

1 year ago

2.8k

v.5.3
B- Bootstrap homepage with background color, hover effects, animations, and shadows added to enhance the design
B-Features Added: Background Gradient: A smooth gradient background using linear-gradient. Card Shadow and Hover Effect: The card now lifts up with a shadow (box-shadow) and smooth transition (transform) on hover. Button Customization: A custom round button with hover color change. Animation: The card content animates with a "fade-in-up" effect using keyframe animation.

Author:
Bhavik Shah

1 year ago

3.4k

v.4.6
Coming Soon Page
Coming Soon Landing page

Author:
Juan Martinez

2 years ago

2.3k

v.5.3
Stats cards using Bootstrap 5
BS5 stat cards

Author:
Anonymous

3 months ago

212

v.5.3
Navbar

Author:
Ad Apon7

6 months ago

1.2k

v.5.3
3213
gg

Author:
L-1485

7 months ago

417

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent