→ 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

4.9k

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

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

Author:
Mason Ashford

1 year ago

6.2k

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

Author:
Kemaya m

2 years ago

24.4k

v.5.3
Minimal shopping cart

Author:
Valeria González

1 year ago

3.2k

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

Author:
Mason Ashford

1 year ago

7.5k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Anonymous

1 year ago

2k

v.5.3
Pagination

Author:
Anonymous

2 years ago

2.8k

v.5.3
page title section
do not copy

Author:
Fitar Ahmed

3 months ago

268

v.4.6
Personal Portfolio --Portfolio Section

Author:
Creative Araf

1 month ago

236

v.5.3
service list
do not copy

Author:
Fitar Ahmed

3 months ago

799

v.4.6
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

10.4k

v.4.6
Activity Logs Dashboard
activity logs component with timeline visualization, export functionality, and detailed event tracking in Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

6.1k

v.5.3
About Our Company
Display your company data

Author:
Tane Mahuta

2 years ago

3.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent