Dans ce tutoriel, tu vas créer une interface e-commerce responsive en HTML, CSS et Bootstrap 5, façon marketplace : une barre de navigation avec logo, compte et panier, puis une grille de cartes produits avec badges, notes, prix barrés et effet de zoom au survol. Un projet visuel idéal pour ton portfolio.

Niveau : débutantDurée : ~1 hHTML · CSS · Bootstrap 5Code source gratuit
Interface e-commerce responsive en HTML, CSS et Bootstrap 5 avec grille de cartes produits
Le résultat final : une boutique en ligne moderne et responsive
Logo GitHubTélécharger le code source du projet sur GitHub

Ce que tu vas construire : une interface e-commerce responsive

L’objectif est de concevoir une interface e-commerce responsive, comme sur les grands sites marchands : un design moderne, agréable à l’œil et adapté à tous les écrans.

🛒 Barre de navigationLogo, accès au compte et panier avec compteur.
🗂️ Grille de produitsDe 1 à 4 colonnes selon la taille de l’écran.
🏷️ Cartes complètesImage, badge promo, note, prix barré et bouton panier.
✨ Animations doucesZoom sur l’image et effets au survol.

Ce projet est fait pour toi si tu apprends le développement web, si tu veux enrichir ton portfolio, ou si tu prépares une intégration dans WordPress, Laravel, Symfony ou Flask.

Ce que tu vas apprendre

  • Structurer ton HTML de manière sémantique
  • Utiliser la grille de Bootstrap 5 pour une mise en page fluide et mobile-first
  • Personnaliser le style avec ton propre CSS pour un rendu plus vivant
  • Rendre ton interface responsive et accessible

Prérequis

  • Les bases de HTML et de CSS
  • Un éditeur de code comme VS Code
  • Des images de produits dans un dossier images (ou des liens vers des images en ligne)
  • Une connexion Internet pour charger Bootstrap, Bootstrap Icons et la police Roboto via CDN
💡
Pour démarrer en douceur

Si tu débutes, commence par créer une carte de profil moderne en HTML et CSS : tu y verras les bases utilisées ici.

Étape 1 : organiser le projet

La page se divise en deux grandes zones : la barre de navigation et la grille de produits. Organise ton dossier ainsi :

/product-card/ ├── index.html → page principale ├── style.css → styles personnalisés ├── images/ → images des produits │ ├── calculator.jpg │ ├── camera.jpg │ ├── casque-fil.jpg │ ├── guitar.jpg │ ├── iphone.png │ ├── ordi.jpg │ ├── talent.jpg │ └── velo.jpg └── README.md → ce fichier

Étape 2 : la barre de navigation (logo, compte et panier)

La barre de navigation est la première chose que voit un visiteur. Elle doit être claire (le logo à gauche), fonctionnelle (le compte et le panier à droite) et s’adapter au mobile :

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold text-secondary" href="#">
      <i class="bi bi-shop fs-3"></i> MaBoutique
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarTop">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item me-3">
          <a class="nav-link d-flex align-items-center" href="#"><i class="bi bi-person me-1"></i>Mon compte</a>
        </li>
        <li class="nav-item position-relative">
          <a class="nav-link d-flex align-items-center" href="#"><i class="bi bi-cart3 me-1"></i>Panier</a>
          <span class="position-absolute top-0 start-100 translate-middle badge bg-danger">0</span>
        </li>
      </ul>
    </div>
  </div>
</nav>
index.html
  • Bootstrap gère la structure responsive de la navigation
  • Les icônes viennent de Bootstrap Icons, chargées via CDN
  • Un badge Bootstrap affiche le nombre d’articles dans le panier

Étape 3 : la grille de produits responsive

C’est ici que le design fait la différence. Grâce aux classes col-12 col-sm-6 col-md-4 col-lg-3, la grille passe de 1 colonne sur mobile à 4 colonnes sur grand écran. Voici le code d’une carte produit :

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  <div class="product-card shadow-sm">
    <div class="card-image-wrapper">
      <img src="images/ordi.jpg" alt="PC Portable 15 pouces" class="card-image" loading="lazy" />
      <span class="badge badge-promo">-10%</span>
      <button class="btn-wishlist" aria-label="Favoris">❤</button>
    </div>
    <div class="card-body d-flex flex-column">
      <h5 class="product-title">PC Portable 15"</h5>
      <div class="rating">★ ★ ★ ★ ☆ <small class="text-muted ms-2">(213)</small></div>
      <p class="product-price mb-3">
        <span class="old-price">749 €</span>
        <span class="current-price">674 €</span>
      </p>
      <button class="btn btn-buy mt-auto">Ajouter au panier</button>
    </div>
  </div>
</div>
index.html
Zoom sur l’imageUn effet fluide avec transform: scale().
Bouton favoriUn cœur pour ajouter le produit à ses favoris.
Badge dynamique« Promo » ou « Rupture de stock » selon l’état du produit.
TypographieLa police Roboto (Google Fonts), claire et lisible.

À ce stade, sans CSS personnalisé, la page reste assez brute :

Interface e-commerce en HTML et Bootstrap avant l'ajout du CSS personnalisé
La page avant l’ajout du CSS personnalisé

Étape 4 : un style CSS moderne et des animations douces

Le style est la clé de l’engagement des visiteurs. Voici les règles principales appliquées aux cartes produits :

.product-card {
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.card-image-wrapper:hover .card-image {
  transform: scale(1.1);
}

.badge-promo {
  background: #ff5722;
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: white;
}

.btn-buy {
  background: #007bff;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
style.css
ℹ️
Astuce

Centralise tes couleurs, tailles et rayons de bordure dans des variables CSS déclarées dans :root : changer le thème de ta boutique ne prendra plus qu’une minute.

Étape 5 : responsive design et accessibilité

Le projet a été testé sur iPhone (Safari et Chrome), sur ordinateur (Chrome, Firefox, Edge) et dans plusieurs tailles d’écran avec les outils de développement :

  • L’affichage reste fluide de 320 px à 1 920 px
  • Tous les boutons sont accessibles au clavier, avec un focus visible
  • Chaque image a un texte alternatif descriptif, utile pour l’accessibilité et le SEO

Le code complet du projet

Voici les deux fichiers complets de ton interface e-commerce responsive, tels qu’ils sont publiés sur GitHub :

<!--
  Auteur : LM-Code
  Website : https://lm-code.be
  Description : Interface e-commerce responsive avec top bar et cartes produits Bootstrap 5
-->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Marketplace - Cartes Produits Responsive</title>

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

  <!-- Bootstrap Icons -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
  />

  <!-- Bootstrap CSS -->
  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />

  <!-- Style personnalisé -->
  <link rel="stylesheet" href="style.css" />
</head>

<body class="bg-light">

  <!-- Top bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container">
      <a class="navbar-brand fw-bold text-secondary" href="#">
        <i class="bi bi-shop fs-3"></i> MaBoutique
      </a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarTop"
        aria-controls="navbarTop"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarTop">
        <ul class="navbar-nav align-items-center">
          <li class="nav-item me-3">
            <a class="nav-link d-flex align-items-center" href="#">
              <i class="bi bi-person fs-5 me-1"></i>
              Mon compte
            </a>
          </li>
          <li class="nav-item position-relative">
            <a class="nav-link d-flex align-items-center" href="#">
              <i class="bi bi-cart3 fs-5 me-1"></i>
              Panier
            </a>
            <span
              class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
            >
              0
              <span class="visually-hidden">articles dans le panier</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Produits -->
  <div class="container py-5">
    <h1 class="mb-4 text-center">Nos meilleures offres</h1>
    <div class="row g-4">
      
      <!-- 1. Casque filaire -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/casque-fil.jpg" alt="Casque filaire" class="card-image" />
            <span class="badge badge-promo">-20%</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Casque Filaire Pro</h5>
            <div class="rating mb-2"><span>★ ★ ★ ★ ☆</span><small class="text-muted ms-2">(85)</small></div>
            <p class="product-price mb-3">
              <span class="old-price">49,00 €</span>
              <span class="current-price">39,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 2. Appareil photo -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/camera.jpg" alt="Appareil photo numérique" class="card-image" />
            <span class="badge badge-promo">-15%</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Appareil Photo 24 MP</h5>
            <div class="rating mb-2"><span>★ ★ ★ ☆ ☆</span><small class="text-muted ms-2">(42)</small></div>
            <p class="product-price mb-3">
              <span class="old-price">199,00 €</span>
              <span class="current-price">169,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 3. Calculatrice -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/calculator.jpg" alt="Calculatrice scientifique" class="card-image" />
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Calculatrice Scientifique</h5>
            <div class="rating mb-2"><span>★ ★ ★ ★ ☆</span><small class="text-muted ms-2">(58)</small></div>
            <p class="product-price mb-3">
              <span class="current-price">24,90 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 4. Ordinateur portable -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/ordi.jpg" alt="Ordinateur portable" class="card-image" />
            <span class="badge badge-promo">-10%</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">PC Portable 15"</h5>
            <div class="rating mb-2"><span>★ ★ ★ ★ ★</span><small class="text-muted ms-2">(230)</small></div>
            <p class="product-price mb-3">
              <span class="old-price">749,00 €</span>
              <span class="current-price">674,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 5. Smartphone -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/iphone.png" alt="Smartphone" class="card-image" />
            <span class="badge badge-promo">-25%</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Smartphone X100</h5>
            <div class="rating mb-2"><span>★ ★ ★ ★ ☆</span><small class="text-muted ms-2">(310)</small></div>
            <p class="product-price mb-3">
              <span class="old-price">499,00 €</span>
              <span class="current-price">374,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 6. Vélo -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/velo.jpg" alt="Vélo de ville" class="card-image" />
            <span class="badge badge-rupture">Rupture</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Vélo Urbain 28"</h5>
            <div class="rating mb-2"><span>★ ★ ★ ☆ ☆</span><small class="text-muted ms-2">(14)</small></div>
            <p class="product-price mb-3">
              <span class="current-price">259,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto" disabled>Rupture</button>
          </div>
        </div>
      </div>

      <!-- 7. Guitare -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/guitar.jpg" alt="Guitare acoustique" class="card-image" />
            <span class="badge badge-promo">-18%</span>
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Guitare Acoustique</h5>
            <div class="rating mb-2"><span>★ ★ ★ ★ ☆</span><small class="text-muted ms-2">(67)</small></div>
            <p class="product-price mb-3">
              <span class="old-price">159,00 €</span>
              <span class="current-price">130,00 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

      <!-- 8. Talent (cas d’usage générique) -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="product-card shadow-sm">
          <div class="card-image-wrapper">
            <img src="images/talent.jpg" alt="Outil multi-usage" class="card-image" />
            <button class="btn-wishlist" aria-label="Ajouter aux favoris">❤</button>
          </div>
          <div class="card-body d-flex flex-column">
            <h5 class="product-title">Talent pour Femme</h5>
            <div class="rating mb-2"><span>★ ★ ★ ☆ ☆</span><small class="text-muted ms-2">(23)</small></div>
            <p class="product-price mb-3">
              <span class="current-price">19,90 €</span>
            </p>
            <button class="btn btn-buy mt-auto">Ajouter au panier</button>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Bootstrap JS Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
index.html
/*
  Website : https://lm-code.be
  Auteur : LM-Code
  Description : Feuille de style principale pour la grille de produits responsive et la top bar e-commerce
*/

:root {
    --font: 'Roboto', sans-serif;
    --primary: #007bff;
    --secondary: #ff5722;
    --light: #f8f9fa;
    --dark: #333;
    --radius: 0.5rem;
    --transition: 0.3s ease;
  }
  
  /* Reset basique */
  * {
    box-sizing: border-box;
  }
  
  body {
    font-family: var(--font);
    color: var(--dark);
  }
  
  /* Top bar adjustments */
  .navbar {
    padding: 0.75rem 1rem;
  }
  .navbar .badge {
    font-size: 0.65rem;
    padding: 0.25rem 0.4rem;
  }
  
  /* Titre page */
  h1 {
    font-weight: 500;
    color: var(--secondary);
  }
  
  /* Carte produit */
  .product-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
  }
  .product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
  
  /* Image */
  .card-image-wrapper {
    position: relative;
    overflow: hidden;
  }
  .card-image {
    width: 100%;
    display: block;
    transition: transform var(--transition);
  }
  .card-image-wrapper:hover .card-image {
    transform: scale(1.1);
  }
  
  /* Badges */
  .badge-promo {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--secondary);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    text-transform: uppercase;
  }
  .badge-rupture {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #6c757d;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8rem;
    text-transform: uppercase;
  }
  
  /* Wishlist heart */
  .btn-wishlist {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    color: var(--secondary);
    cursor: pointer;
    transition: background var(--transition);
  }
  .btn-wishlist:hover {
    background: rgba(255,255,255,1);
  }
  
  /* Corps de la carte */
  .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  .product-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 1.2;
  }
  .rating {
    color: #f0ad4e;
    font-size: 0.9rem;
  }
  .product-price {
    font-size: 1.1rem;
  }
  .old-price {
    text-decoration: line-through;
    color: #999;
    margin-right: 0.5rem;
  }
  .current-price {
    color: var(--secondary);
    font-weight: 700;
  }
  
  /* Bouton ajouter au panier */
  .btn-buy {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.5rem;
    transition: background var(--transition);
  }
  .btn-buy:hover {
    background: #0056b3;
  }
  
  /* Responsive tweaks */
  @media (max-width: 576px) {
    .btn-wishlist { top: 0.5rem; right: 0.5rem; }
    .badge-promo, .badge-rupture { top: 0.5rem; left: 0.5rem; }
    .card-image { height: 180px; object-fit: cover; }
  }
style.css
Logo GitHubTélécharger le code source du projet sur GitHub

Aller plus loin

FAQ : questions fréquentes

Faut-il connaître Bootstrap pour suivre ce tutoriel ?

Non, les bases de HTML et CSS suffisent. Les classes Bootstrap utilisées (grille, navigation, badges) sont expliquées au fil des étapes.

Comment changer le nombre de produits par ligne ?

Modifie les classes col-* de chaque carte. Par exemple, col-lg-4 affiche 3 produits par ligne sur grand écran au lieu de 4.

Le panier fonctionne-t-il vraiment ?

Non, cette interface est une maquette front-end. Pour un vrai panier, il faut ajouter du JavaScript (localStorage) ou un back-end avec une base de données.

Puis-je utiliser ce projet pour ma propre boutique ?

Oui, c’est une bonne base de départ. Remplace les produits, les images et les couleurs, puis connecte-la à une solution comme WooCommerce ou à ton propre back-end.

Bravo, ton interface e-commerce responsive est terminée ! Tu maîtrises maintenant la grille Bootstrap et les animations CSS. N’hésite pas à partager ta version sur GitHub ou en commentaire.

Tags:

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *