→ 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

19.1k

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

6.2k

v.5.3
Minimal shopping cart

Author:
Valeria González

1 year ago

2.6k

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

1 year ago

2.2k

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

Author:
Valeria González

1 year ago

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

5.4k

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

1 year ago

30.2k

v.5.3
Login modal

Author:
Prajwal Hallale

1 year ago

7k

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

Author:
Mason Ashford

1 year ago

5.4k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

9.2k

v.4.6
404 page template

Author:
Valeria González

1 year ago

26.2k

v.5.3
Product details page
Beautiful product detail page with

Author:
Edy Gafatrans (gafatrans)

1 year ago

2.2k

v.5.3
Social media buttons
Beautiful and simple social media buttons

Author:
Maria Garcia

1 year ago

4.3k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent