Bootstrap 5
List
Bootstrap 5 Design
Template
Html
Integration List
Dashboard
List Group Bootstrap 5 optimisées pour la visualisation et l'interaction. Composants modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet List Ul Li Bootstrap 5 2026 23040045 | AngularForAll</title>
<!-- Bootstrap 5 + icônes Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- police optionnelle -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">
<style>
* { font-family: 'Inter', system-ui, sans-serif; }
body { background: #f4f7fc; padding: 2rem 1rem; }
.card-custom { border: none; border-radius: 24px; transition: transform 0.1s ease, box-shadow 0.2s; background: #ffffff; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.02); }
.card-custom:hover { box-shadow: 0 20px 30px -10px rgba(0,20,50,0.1); transform: translateY(-2px); }
/* --- styles uniques pour chaque ul/li (numérotés 1 à 10) --- */
/* 1 : puces personnalisées + icône */
.list-style-1 { list-style: none; padding-left: 0; }
.list-style-1 li { padding: 0.5rem 0 0.5rem 1.8rem; position: relative; font-weight: 450; }
.list-style-1 li::before { content: "✨"; position: absolute; left: 0; color: #0d6efd; font-size: 1.1rem; }
/* 2 : style bloc encadré + icône Bootstrap */
.list-style-2 { list-style: none; padding: 0; }
.list-style-2 li { background: #f8fafd; margin: 0.5rem 0; padding: 0.75rem 1rem; border-radius: 60px; border-left: 6px solid #198754; font-weight: 500; }
/* 3 : check vert + interligne */
.list-style-3 { list-style: none; padding-left: 0.2rem; }
.list-style-3 li { padding: 0.4rem 0 0.4rem 2rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23198754" class="bi bi-check-circle-fill" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>') left center no-repeat; background-size: 1.3rem; }
/* 4 : ligne séparée, soulignée */
.list-style-4 { list-style: none; padding: 0; }
.list-style-4 li { padding: 0.7rem 0; border-bottom: 1px dashed #dee2e6; display: flex; align-items: center; gap: 10px; }
.list-style-4 li:last-child { border-bottom: none; }
.list-style-4 li i { color: #6f42c1; width: 1.5rem; font-size: 1.2rem; }
/* 5 : style "étiquette" bleu transparent */
.list-style-5 { list-style: none; padding: 0; }
.list-style-5 li { display: inline-block; background: #e7f1ff; color: #0a58ca; margin: 0.25rem 0.35rem; padding: 0.3rem 1rem; border-radius: 30px; font-weight: 500; font-size: 0.9rem; }
/* 6 : compteur / numéro cercle */
.list-style-6 { list-style: none; padding-left: 0; counter-reset: card-counter; }
.list-style-6 li { counter-increment: card-counter; margin-bottom: 0.9rem; padding-left: 2.5rem; position: relative; font-weight: 500; }
.list-style-6 li::before { content: counter(card-counter); background: #0d6efd; color: white; font-weight: bold; width: 1.8rem; height: 1.8rem; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; position: absolute; left: 0; top: -2px; font-size: 0.9rem; }
/* 7 : icône bi + dégradé text */
.list-style-7 { list-style: none; padding: 0; }
.list-style-7 li { padding: 0.6rem 0; display: flex; align-items: center; }
.list-style-7 li i { font-size: 1.3rem; margin-right: 12px; background: linear-gradient(145deg, #b23cfd, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 8 : style carte secondaire avec bordures arrondies */
.list-style-8 { list-style: none; padding: 0; }
.list-style-8 li { background: #fff; border: 1.5px solid #e9ecef; border-radius: 16px; padding: 0.6rem 1rem; margin-bottom: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.1s; }
.list-style-8 li:hover { border-color: #adb5bd; background: #fcfcfd; }
/* 9 : colonnes flottantes dans ul (flex wrap) */
.list-style-9 { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.list-style-9 li { background: #212529; color: #f8f9fa; padding: 0.4rem 1.1rem; border-radius: 40px; font-size: 0.9rem; font-weight: 450; box-shadow: 0 6px 10px rgba(0,0,0,0.1); }
/* 10 : flèche discrète + hover slide */
.list-style-10 { list-style: none; padding: 0; }
.list-style-10 li { padding: 0.65rem 0.65rem 0.65rem 1.8rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23dc3545" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/></svg>') left center no-repeat; background-size: 1.2rem; transition: padding-left 0.2s; border-radius: 10px; }
.list-style-10 li:hover { background-color: #fff1f0; padding-left: 2.2rem; }
/* ajustement header card */
.card-header-clean { background: transparent; border-bottom: 1px solid rgba(0,0,0,0.05); font-weight: 600; padding: 1.2rem 1.5rem 0.6rem; }
</style>
</head>
<body>
<div class="container-lg">
<div class="mb-4 d-flex align-items-center gap-3">
<h1 class="display-6 fw-semibold">📋 10 cartes · <span class="text-primary">ul / li</span> stylisées</h1>
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill">Bootstrap 5 + icônes</span>
</div>
<div class="row g-4">
<!-- CARD 1 : puces étoiles personnalisées -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-card d-flex align-items-center ps-4 pt-4 pb-2">
<i class="bi bi-star-fill text-warning me-2"></i>
<h5 class="fw-bold mb-0">Priorités projet</h5>
</div>
<div class="card-body pt-1">
<ul class="list-style-1">
<li>Analyse des besoins utilisateurs</li>
<li>Design system & composants</li>
<li>Développement front-end</li>
<li>Revue de code & accessibilité</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0 pb-3 ps-4"><small class="text-secondary">✨ 4 étapes clés</small></div>
</div>
</div>
<!-- CARD 2 : liste style bloc avec bordure gauche verte -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean d-flex">
<i class="bi bi-check2-circle text-success me-2 fs-5"></i> <span class="fw-semibold fs-5">Objectifs validés</span>
</div>
<div class="card-body">
<ul class="list-style-2">
<li><i class="bi bi-arrow-right-short me-1"></i> Augmentation du CA +18%</li>
<li><i class="bi bi-arrow-right-short me-1"></i> Satisfaction client > 92%</li>
<li><i class="bi bi-arrow-right-short me-1"></i> Déploiement continu</li>
</ul>
</div>
</div>
</div>
<!-- CARD 3 : check circle (SVG) -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean d-flex align-items-center">
<i class="bi bi-patch-check-fill text-success me-2"></i> <span class="fw-semibold">Checklist QA</span>
</div>
<div class="card-body">
<ul class="list-style-3">
<li>Tests unitaires & intégration</li>
<li>Audit Lighthouse > 95</li>
<li>Compatibilité mobile</li>
<li>Validation W3C</li>
</ul>
</div>
</div>
</div>
<!-- CARD 4 : icônes Bootstrap + séparateurs -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-grid-3x3-gap-fill me-2 text-primary"></i>Modules actifs</div>
<div class="card-body">
<ul class="list-style-4">
<li><i class="bi bi-file-earmark-code"></i> Authentification</li>
<li><i class="bi bi-bar-chart-line"></i> Tableau de bord</li>
<li><i class="bi bi-envelope-paper"></i> Messagerie</li>
<li><i class="bi bi-gear"></i> Paramètres</li>
</ul>
</div>
</div>
</div>
<!-- CARD 5 : étiquettes (tags) -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-tags-fill me-2" style="color:#2563eb;"></i>Compétences</div>
<div class="card-body">
<ul class="list-style-5">
<li>React</li>
<li>TypeScript</li>
<li>Bootstrap</li>
<li>Node.js</li>
<li>UX design</li>
<li>Python</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0 pb-3"><small>6 technologies</small></div>
</div>
</div>
<!-- CARD 6 : numérotation cerclée -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-123 me-2"></i>Top 4 priorités</div>
<div class="card-body">
<ul class="list-style-6">
<li>Refonte page d’accueil</li>
<li>Optimisation SEO</li>
<li>Intégration API paiement</li>
<li>Newsletter & rétention</li>
</ul>
</div>
</div>
</div>
<!-- CARD 7 : icônes avec dégradé (icônes bi) -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-palette-fill me-2" style="color:#b23cfd;"></i>Design tokens</div>
<div class="card-body">
<ul class="list-style-7">
<li><i class="bi bi-circle-fill"></i> Couleurs primaires</li>
<li><i class="bi bi-type"></i> Typographie Inter</li>
<li><i class="bi bi-border-width"></i> Espacements 8px</li>
<li><i class="bi bi-droplet-half"></i> Ombres cohérentes</li>
</ul>
</div>
</div>
</div>
<!-- CARD 8 : cartes secondaires (li comme cartouche) -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-card-list me-2"></i>Ressources</div>
<div class="card-body">
<ul class="list-style-8">
<li><i class="bi bi-file-pdf text-danger me-2"></i> Documentation.pdf</li>
<li><i class="bi bi-file-earmark-spreadsheet text-success me-2"></i> Chiffres clés.xlsx</li>
<li><i class="bi bi-image text-primary me-2"></i> Assets graphiques</li>
</ul>
</div>
</div>
</div>
<!-- CARD 9 : mode flex / badges sombres -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-dice-5-fill me-2"></i>Hashtags tendance</div>
<div class="card-body">
<ul class="list-style-9">
<li>#webdev</li>
<li>#bootstrap</li>
<li>#css</li>
<li>#frontend</li>
<li>#ux</li>
</ul>
</div>
</div>
</div>
<!-- CARD 10 : flèche + hover slide -->
<div class="col-md-6 col-lg-4">
<div class="card card-custom h-100">
<div class="card-header-clean"><i class="bi bi-arrow-right-circle-fill me-2 text-danger"></i>Prochaines étapes</div>
<div class="card-body">
<ul class="list-style-10">
<li>Réunion de lancement</li>
<li>Atelier idéation</li>
<li>Prototypage Figma</li>
<li>Revue sprint</li>
</ul>
</div>
</div>
</div>
</div>
<!-- légende discrète -->
<div class="text-muted mt-5 small text-center border-top pt-3">
⚡ 10 exemples de cartes avec <code><ul> <li></code> stylisés – puces, icônes, compteurs, tags · Bootstrap 5.3
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur