→ 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

6.7k

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

4 months ago

1.9k

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

8 months ago

9.4k

v.5.3
Minimal shopping cart

Author:
Valeria González

4 months ago

716

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

Author:
Mason Ashford

4 months ago

1.8k

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

Author:
Valeria González

4 months ago

1.6k

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

2 months ago

533

v.5.3
Simple hero section

Author:
Mateo Rojas

3 months ago

1.6k

v.5.3
Spinner buttons
Loading spinner buttons

Author:
Mishti

11 months ago

836

v.5.3
Pricing Card
with the most popular tag

Author:
Sofia Petrova

8 months ago

674

v.5.3
Background image with bootstrap 4
Bootstrap 4 background image

Author:
Anonymous

3 months ago

371

v.4.6
Coming Soon Page
Coming Soon landing page example made with Bootstrap 5

Author:
Maria Garcia

8 months ago

479

v.5.3
progress-steps
progress-steps

Author:
Rami AlAjo

1 month ago

200

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent