Article Categories

Selected Reading

Create an \"Add to cart\" button in Bootstrap

HTML Web Development Front End Technology

Bootstrap is a popular front-end framework that makes it easier to design and develop responsive and mobile-first websites. It provides several components and plugins that can be used to create an add-to-cart button with modal confirmation functionality. The framework contains pre-built styles and interactive components that can save time and effort in building e-commerce interfaces.

An add-to-cart button is a crucial element in e-commerce websites that allows users to select products for purchase. When combined with Bootstrap's modal component, it provides immediate feedback to users confirming their action.

Basic Add to Cart Button

The simplest approach uses Bootstrap's button styling classes to create an attractive add-to-cart button

<button class="btn btn-primary">
  <i class="fa fa-shopping-cart"></i> Add to Cart
</button>

This creates a styled button with Bootstrap's primary color scheme and optional cart icon.

Add to Cart with Modal Confirmation

A more interactive approach shows a modal dialog to confirm the item has been added to the cart. This improves user experience by providing immediate feedback.

Complete Example

Following example demonstrates a product card with an add-to-cart button that triggers a Bootstrap modal

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add to Cart Button</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="row g-0">
            <div class="col-md-4">
              <img src="https://via.placeholder.com/300x200?text=Product" class="img-fluid rounded-start h-100" alt="Product">
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title">Premium Headphones</h5>
                <p class="card-text">High-quality wireless headphones with noise cancellation and premium sound quality.</p>
                <h4 class="text-success">$89.99</h4>
                <button class="btn btn-primary add-to-cart" data-bs-toggle="modal" data-bs-target="#cartModal">
                  <i class="fas fa-shopping-cart"></i> Add to Cart
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="cartModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">
            <i class="fas fa-check-circle text-success"></i> Added to Cart
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p>Premium Headphones has been successfully added to your cart.</p>
          <div class="d-flex justify-content-between">
            <span>Price: <strong>$89.99</strong></span>
            <span>Quantity: <strong>1</strong></span>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue Shopping</button>
          <button type="button" class="btn btn-success">View Cart</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This example creates a product card with an add-to-cart button. Clicking the button opens a modal confirmation dialog with product details and action buttons.

Add to Cart with JavaScript Enhancement

For more dynamic functionality, you can add JavaScript to handle cart operations and update the interface

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Enhanced Add to Cart</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <img src="https://via.placeholder.com/400x250?text=Laptop" class="card-img-top" alt="Laptop">
          <div class="card-body">
            <h5 class="card-title">Gaming Laptop</h5>
            <p class="card-text">High-performance gaming laptop with dedicated graphics card.</p>
            <h4 class="text-danger">$1299.99</h4>
            <div class="d-flex align-items-center mb-3">
              <label for="quantity" class="form-label me-2">Quantity:</label>
              <input type="number" class="form-control" id="quantity" min="1" max="10" value="1" style="width: 80px;">
            </div>
            <button class="btn btn-success btn-lg w-100" id="addToCartBtn">
              <i class="fas fa-cart-plus"></i> Add to Cart
            </button>
            <div class="alert alert-success mt-3 d-none" id="successAlert">
              <i class="fas fa-check"></i> Item added to cart successfully!
            </div>
          </div>
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5><i class="fas fa-shopping-cart"></i> Shopping Cart</h5>
          </div>
          <div class="card-body">
            <div id="cartItems">
              <p class="text-muted">Your cart is empty</p>
            </div>
            <hr>
            <div class="d-flex justify-content-between">
              <strong>Total: <span id="cartTotal">$0.00</span></strong>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    let cart = [];
    const productPrice = 1299.99;
    const productName = "Gaming Laptop";

    document.getElementById('addToCartBtn').addEventListener('click', function() {
      const quantity = parseInt(document.getElementById('quantity').value);
      
      // Add item to cart
      cart.push({
        name: productName,
        price: productPrice,
        quantity: quantity
      });
      
      // Update cart display
      updateCartDisplay();
      
      // Show success alert
      const alert = document.getElementById('successAlert');
      alert.classList.remove('d-none');
      setTimeout(() => {
        alert.classList.add('d-none');
      }, 3000);
    });

    function updateCartDisplay() {
      const cartItems = document.getElementById('cartItems');
      const cartTotal = document.getElementById('cartTotal');
      
      if (cart.length === 0) {
        cartItems.innerHTML = '<p class="text-muted">Your cart is empty</p>';
        cartTotal.textContent = '$0.00';
        return;
      }
      
      let total = 0;
      let html = '';
      
      cart.forEach((item, index) => {
        const itemTotal = item.price * item.quantity;
        total += itemTotal;
        html += `
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
              <strong>${item.name}</strong><br>
              <small>$${item.price.toFixed(2)} × ${item.quantity}</small>
            </div>
            <span>$${itemTotal.toFixed(2)}</span>
          </div>
        `;
      });
      
      cartItems.innerHTML = html;
      cartTotal.textContent = `$${total.toFixed(2)}`;
    }
  </script>
</body>
</html>

This enhanced version includes quantity selection, real-time cart updates, and success feedback without requiring a modal.

Button Variations

Bootstrap provides various button styles for different design needs

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add to Cart Button Styles</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">

  <div class="container">
    <h2>Add to Cart Button Variations</h2>
    <div class="row g-4">
      
      <div class="col-md-4">
        <div class="card text-center">
          <div class="card-body">
            <h6>Primary Style</h6>
            <button class="btn btn-primary">
              <i class="fas fa-shopping-cart"></i> Add to Cart
            </button>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card text-center">
          <div class="card-body">
            <h6>Success Style</h6>
            <button class="btn btn-success">
              <i class="fas fa-cart-plus"></i> Add to Cart
            </button>
          </div>
        </div>
      </div>
      
      <div class="col-md-4">
        <div class="card text-center">
          <div class="card-body">
            <h6>Outline Style</h6>
            <button class="btn btn-outline-primary">
              <i class="fas fa-shopping-cart"></i> Add to Cart
            </button>
          </div

Jaisshree

Updated on: 2026-03-16T21:38:54+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next