→ 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

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 month ago

557

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

Author:
Valeria González

1 month ago

511

v.5.3
Minimal shopping cart

Author:
Valeria González

1 month ago

113

v.5.3
Product details page
Beautiful product detail page with

Author:
Andreas Müller

5 months ago

1.4k

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

Author:
Mason Ashford

1 month ago

548

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

1 month ago

141

v.5.3
Contact Us form

Author:
Anonymous

9 months ago

2.8k

v.4.6
Pricing Cards
Three pricing tiers (Basic, Pro, and Enterprise) using Bootstrap's card component.

Author:
Sofia Petrova

5 months ago

297

v.5.3
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

2 months ago

979

v.5.3
Simple portfolio card

Author:
Maria Garcia

5 months ago

261

v.5.3
Accordion example with Bootstrap 5.3

Author:
Ankit khedkar

5 months ago

1.3k

v.5.3
HTML, CSS, and Bootstrap. This approach will be purely HTML and CSS without any JavaScript.
HTML: Bootstrap Integration: Linked to Bootstrap CDN for styling. Form Structure: Contains input fields for name, email, and message, all within a card component. CSS: Background Gradient: Applied to the body for a visually appealing background. Card Styling: Rounded corners and padding for the card. Button Styling: Custom colors for the submit button, including hover effects. How to Use: Create an index.html file and copy the above code into it. Open the HTML file in your web browser to view the Contact Us form.

Author:
zobaidul kaziex

3 months ago

239

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent