Bootstrap
Bootstrap5
Banniere
300X300
Card
Html
Template de bannière responsive Bootstrap 5 au format 300x300 pixels avec image et texte superposés.
<!doctype html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Bootstrap5 Banniere 300 300 01 | AngularForAll</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="public/logo.png" 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>
Télécharger le fichier source