Bootstrap 5
Timeline
Vertical
Etapes
Responsive
Template
Bootstrap Icons
Composant timeline verticale Bootstrap 5 avec icônes Bootstrap Icons, design moderne Poppins, étapes colorées et responsive.
<!DOCTYPE html>
<html lang="fr">
<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>Snippets Timeline Bootstrap5 2026 05050350 | AngularForAll</title>
<!-- Bootstrap 5 CSS + Icons -->
<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">
<!-- Google Font (Poppins pour un look moderne) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(145deg, #f8f9fe 0%, #eef2f9 100%);
min-height: 100vh;
padding: 2rem 0;
}
.timeline-section {
padding: 2rem 0;
}
.section-title {
font-weight: 600;
letter-spacing: -0.02em;
color: #1e293b;
}
.section-subtitle {
color: #64748b;
font-weight: 400;
}
/* === TIMELINE CENTRALE (ligne verticale) === */
.timeline {
position: relative;
padding: 2rem 0;
}
/* ligne verticale */
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
transform: translateX(-50%);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
/* conteneur d'élément */
.timeline-item {
position: relative;
width: 100%;
margin-bottom: 3rem;
}
/* carte (contenu) */
.timeline-card {
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 28px;
padding: 1.75rem 1.75rem 1.75rem 2.2rem;
box-shadow: 0 15px 35px -10px rgba(0, 20, 40, 0.15);
transition: all 0.25s ease;
position: relative;
width: 100%;
}
.timeline-card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 45px -12px rgba(0, 20, 40, 0.22);
background: rgba(255, 255, 255, 0.92);
border-color: rgba(255, 255, 255, 0.9);
}
/* point / marqueur sur la ligne */
.timeline-badge {
position: absolute;
top: 1.8rem;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: white;
border: 4px solid #3b82f6;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
z-index: 2;
transition: all 0.2s;
}
.timeline-item:hover .timeline-badge {
border-color: #8b5cf6;
box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.25);
transform: translateX(-50%) scale(1.05);
}
/* icône dans le badge (cercle intérieur) */
.timeline-badge i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.7rem;
color: #3b82f6;
transition: color 0.2s;
}
.timeline-item:hover .timeline-badge i {
color: #8b5cf6;
}
/* date / petit label */
.timeline-date {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.02em;
color: #475569;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(4px);
display: inline-block;
padding: 0.25rem 1rem;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.7);
margin-bottom: 0.6rem;
}
.timeline-title {
font-weight: 600;
font-size: 1.25rem;
color: #0f172a;
margin-bottom: 0.5rem;
}
.timeline-desc {
color: #334155;
font-weight: 400;
margin-bottom: 0.6rem;
font-size: 0.95rem;
}
/* étiquette (tag) */
.timeline-tag {
display: inline-block;
background: linear-gradient(135deg, #dbeafe, #ede9fe);
color: #1e40af;
font-size: 0.7rem;
font-weight: 600;
padding: 0.2rem 1rem;
border-radius: 40px;
letter-spacing: 0.02em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* === RESPONSIVE : mobile first, on décale la ligne à gauche (sm) === */
@media (max-width: 767.98px) {
.timeline::before {
left: 1.5rem;
transform: none;
}
.timeline-badge {
left: 1.5rem;
transform: translateX(-50%);
}
.timeline-item:hover .timeline-badge {
transform: translateX(-50%) scale(1.05);
}
.timeline-card {
width: calc(100% - 3rem);
margin-left: 3.5rem;
padding: 1.5rem 1.5rem 1.5rem 1.8rem;
}
/* ajustement date */
.timeline-date {
font-size: 0.8rem;
padding: 0.2rem 0.9rem;
}
}
/* desktop : alternance gauche / droite */
@media (min-width: 768px) {
.timeline-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
/* colonne de gauche (contenu) */
.timeline-item .timeline-card-wrapper {
width: 47%;
}
.timeline-item:nth-child(odd) .timeline-card-wrapper {
margin-right: auto;
text-align: right;
}
.timeline-item:nth-child(even) .timeline-card-wrapper {
margin-left: auto;
text-align: left;
}
/* ajustement du badge au centre */
.timeline-badge {
left: 50%;
transform: translateX(-50%);
}
/* carte : alignement interne */
.timeline-item:nth-child(odd) .timeline-card {
text-align: right;
padding: 1.75rem 2.2rem 1.75rem 1.75rem;
}
.timeline-item:nth-child(even) .timeline-card {
text-align: left;
padding: 1.75rem 1.75rem 1.75rem 2.2rem;
}
/* date et tag : inline-block naturel, mais pour le text-align right, on utilise flex ou block */
.timeline-item:nth-child(odd) .timeline-date,
.timeline-item:nth-child(odd) .timeline-tag {
text-align: right;
display: inline-block;
}
.timeline-item:nth-child(even) .timeline-date,
.timeline-item:nth-child(even) .timeline-tag {
text-align: left;
display: inline-block;
}
/* ajustement espace */
.timeline-item:nth-child(even) .timeline-card-wrapper {
padding-left: 1rem;
}
.timeline-item:nth-child(odd) .timeline-card-wrapper {
padding-right: 1rem;
}
}
/* petit ajustement pour les très grands écrans */
@media (min-width: 1400px) {
.timeline-card {
padding: 2rem 2.5rem;
}
}
/* Icône décorative dans la carte */
.timeline-icon {
font-size: 1.5rem;
margin-right: 0.5rem;
color: #3b82f6;
vertical-align: middle;
}
.timeline-item:nth-child(odd) .timeline-icon {
margin-right: 0;
margin-left: 0.5rem;
}
.footer-credit {
margin-top: 3rem;
color: #64748b;
font-weight: 300;
font-size: 0.9rem;
}
.footer-credit a {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}
</style>
</head>
<body>
<div class="container">
<!-- En-tête -->
<div class="row mb-5 text-center">
<div class="col-12">
<h1 class="section-title display-5 fw-bold">
<i class="bi bi-clock-history me-2" style="color: #3b82f6;"></i> Évolution moderne
</h1>
<p class="section-subtitle lead">Parcours interactif • design épuré & responsive</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<span class="badge bg-primary bg-opacity-10 text-primary px-4 py-2 rounded-pill border border-primary border-opacity-25">
<i class="bi bi-bootstrap-fill me-1"></i> Bootstrap 5
</span>
<span class="badge bg-purple bg-opacity-10 text-purple px-4 py-2 rounded-pill border border-purple border-opacity-25" style="color:#8b5cf6;">
<i class="bi bi-arrow-through-heart me-1"></i> Timeline fluide
</span>
</div>
</div>
</div>
<!-- TIMELINE -->
<div class="timeline">
<!-- Élément 1 (gauche - desktop) -->
<div class="timeline-item">
<div class="timeline-card-wrapper">
<div class="timeline-card">
<span class="timeline-date"><i class="bi bi-calendar3 me-1"></i> 2018 — 2020</span>
<h4 class="timeline-title">
<i class="bi bi-layers timeline-icon"></i> Fondations
</h4>
<p class="timeline-desc">
Concept initial & architecture. <br>
<span class="fw-light text-secondary">Prototypage rapide, premiers utilisateurs.</span>
</p>
<span class="timeline-tag"><i class="bi bi-lightbulb me-1"></i> MVP</span>
</div>
</div>
<div class="timeline-badge">
<i class="bi bi-star-fill"></i>
</div>
</div>
<!-- Élément 2 (droite - desktop) -->
<div class="timeline-item">
<div class="timeline-card-wrapper">
<div class="timeline-card">
<span class="timeline-date"><i class="bi bi-calendar3 me-1"></i> 2021 — 2022</span>
<h4 class="timeline-title">
<i class="bi bi-rocket-takeoff timeline-icon"></i> Croissance
</h4>
<p class="timeline-desc">
Scaling & intégrations. <br>
<span class="fw-light text-secondary">+15k utilisateurs actifs, partenariats clés.</span>
</p>
<span class="timeline-tag"><i class="bi bi-graph-up-arrow me-1"></i> Scale</span>
</div>
</div>
<div class="timeline-badge">
<i class="bi bi-arrow-up-circle"></i>
</div>
</div>
<!-- Élément 3 (gauche - desktop) -->
<div class="timeline-item">
<div class="timeline-card-wrapper">
<div class="timeline-card">
<span class="timeline-date"><i class="bi bi-calendar3 me-1"></i> 2023 — 2024</span>
<h4 class="timeline-title">
<i class="bi bi-diagram-3 timeline-icon"></i> Expansion
</h4>
<p class="timeline-desc">
Nouveaux marchés & expérience unifiée. <br>
<span class="fw-light text-secondary">Refonte complète, design system.</span>
</p>
<span class="timeline-tag"><i class="bi bi-globe2 me-1"></i> Global</span>
</div>
</div>
<div class="timeline-badge">
<i class="bi bi-globe2"></i>
</div>
</div>
<!-- Élément 4 (droite - desktop) -->
<div class="timeline-item">
<div class="timeline-card-wrapper">
<div class="timeline-card">
<span class="timeline-date"><i class="bi bi-calendar3 me-1"></i> 2025 — aujourd'hui</span>
<h4 class="timeline-title">
<i class="bi bi-stars timeline-icon"></i> Excellence
</h4>
<p class="timeline-desc">
Innovation continue & leadership. <br>
<span class="fw-light text-secondary">IA générative, expérience immersive.</span>
</p>
<span class="timeline-tag"><i class="bi bi-cpu me-1"></i> Future</span>
</div>
</div>
<div class="timeline-badge">
<i class="bi bi-cpu"></i>
</div>
</div>
</div>
<!-- Pied de page léger -->
<div class="row mt-4">
<div class="col-12 text-center footer-credit">
<span class="d-inline-block px-3 py-1 rounded-pill bg-white bg-opacity-50 shadow-sm">
<i class="bi bi-arrow-right-circle me-1"></i>
Timeline moderne • <a href="#" class="fw-semibold">Bootstrap 5</a>
</span>
</div>
</div>
</div>
<!-- Bootstrap JS (optionnel, pour toggles etc.) -->
<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