→ Valeria González
→ Bootstrap 5 shopping cart design

Bootstrap 5 shopping cart design

clean and beautiful shopping cart component

This bootstrap css example is contributed by Valeria González, on 22-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Shopping cart

Author Valeria González

1.3k

v.5.3

Fork Fullscreen

<div class="container mt-5">
    <div class="row">
        
        <div class="col-lg-8">
            <h3>Your Shopping Cart</h3>

<div class="cart-item d-flex justify-content-between">
                <div class="d-flex">
                    <img src="https://via.placeholder.com/100" alt="Product" class="product-img me-3">
                    <div>
                        <h5>Product Name 1</h5>
                        <p class="text-muted">Description of the product.</p>
                        <input type="number" class="form-control w-25" value="1">
                    </div>
                </div>
                <div class="d-flex flex-column justify-content-between">
                    <span>$25.99</span>
                    <button class="btn btn-sm btn-danger">Remove</button>
                </div>
            </div>

<div class="cart-item d-flex justify-content-between">
                <div class="d-flex">
                    <img src="https://via.placeholder.com/100" alt="Product" class="product-img me-3">
                    <div>
                        <h5>Product Name 2</h5>
                        <p class="text-muted">Another product description.</p>
                        <input type="number" class="form-control w-25" value="2">
                    </div>
                </div>
                <div class="d-flex flex-column justify-content-between">
                    <span>$19.99</span>
                    <button class="btn btn-sm btn-danger">Remove</button>
                </div>
            </div>

</div>

<div class="col-lg-4">
            <div class="cart-summary">
                <h4>Cart Summary</h4>
                <ul class="list-unstyled">
                    <li class="d-flex justify-content-between">
                        <span>Subtotal:</span>
                        <span>$45.98</span>
                    </li>
                    <li class="d-flex justify-content-between">
                        <span>Shipping:</span>
                        <span>$5.00</span>
                    </li>
                    <li class="d-flex justify-content-between">
                        <span class="total-price">Total:</span>
                        <span class="total-price">$50.98</span>
                    </li>
                </ul>
                <button class="btn btn-checkout w-100">Proceed to Checkout</button>
            </div>
        </div>
    </div>
</div>

More Examples

Shopping cart design using Bootstrap 5
With order summary and promo code form

Author:
Kemaya m

7 months ago

4.7k

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

Author:
Mason Ashford

3 months ago

1.4k

v.5.3
Minimal shopping cart

Author:
Valeria González

3 months ago

468

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

Author:
Mason Ashford

3 months ago

1.4k

v.5.3
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

2 months ago

673

v.5.3
Pricing Page with Bootstrap and Icons
HTML: Navbar: Provides navigation links, including a link to the Pricing page. Pricing Section: Contains three columns, each representing a pricing plan with a card layout. Icons: Font Awesome icons are used for visual representation (e.g., stars and check circles). CSS: Card Styling: Adds border, shadow, and hover effects to the pricing cards. Plan-Specific Styles: Different border colors for each pricing plan (Free, Gold, Platinum). Button Styles: Different button colors to match the card styles. JavaScript: No custom JavaScript is required for this static pricing page, but you can add interactivity if needed. How to Use: Customize Content: Update the plan names, prices, features, and button actions as needed. Replace Icons: Choose different Font Awesome icons if desired by updating the <i> elements.

Author:
zobaidul kaziex

5 months ago

400

v.4.6
Search bar
Search bar with icon

Author:
Anonymous

11 months ago

14.2k

v.5.3
Feature showcase
Feature showcase with icos

Author:
Anonymous

11 months ago

473

v.4.6
Collapsible Nested list
Tree structure design for nested list

Author:
Moana silva

7 months ago

1.3k

v.5.3
Sign in with Google

Author:
Juan Martinez

7 months ago

2.2k

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

10 months ago

693

v.3.4
Testimonial carousel

Author:
Sofia Petrova

7 months ago

618

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent