Bannière Bootstrap 5 - 300x300 v1

Bootstrap Bootstrap5 Banniere 300X300 Card Html

Template de bannière responsive Bootstrap 5 au format 300x300 pixels avec image et texte superposés.

👁️ Aperçu
💻 Code source

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Bannière Bootstrap 5</title>

  <!-- Bootstrap 5 CSS -->
  <link 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
    rel="stylesheet"
  >

  <!-- Font Awesome (icônes) -->
  <link 
    rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
  >

  <style>
    /* Style pour une card 300x300 */
    .banner-card {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }
    .banner-card img {
      height: 150px;
      object-fit: cover;
    }
  </style>
</head>

<body class="bg-light">

  <div class="container py-5">

    <h2 class="mb-4 text-center">
      Exemple de Bannière Bootstrap 5
    </h2>

    <div class="d-flex justify-content-center">

      <div class="card banner-card shadow">
        <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Bannière">

        <div class="card-body text-center d-flex flex-column justify-content-between">
          <h5 class="card-title fw-bold">
            <i class="fas fa-bullhorn"></i> Promo Spéciale
          </h5>

          <p class="card-text">
            Découvrez nos nouveautés du moment.
          </p>

          <a href="#" class="btn btn-primary btn-sm">
            <i class="fas fa-arrow-right"></i> Voir plus
          </a>
        </div>
      </div>

    </div>

  </div>

  <!-- Bootstrap 5 JS (sans jQuery) -->
  <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
  </script>

</body>
</html>

🔗 Ouvrir dans un nouvel onglet

📌 Voir aussi

🏷️ Explorer par mot clé