Bootstrap 5
Wizard
Steps
Formulaire
Animations
Interactive
Interface wizard multi-étapes Bootstrap 5 avec icons animés, progression visuelle fluide et navigation intuitive entre étapes.
<!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 Step Progress Timeline Order Boostrap5 202605060033 | AngularForAll</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<style>
.wizard-steps {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
padding: 2rem;
}
.wizard-item {
display: flex;
align-items: center;
margin-bottom: 2rem;
position: relative;
cursor: pointer;
}
.wizard-item:last-child {
margin-bottom: 0;
}
.wizard-icon {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
font-size: 1.5rem;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.2);
color: white;
}
.wizard-item.active .wizard-icon {
background: #ffd700;
color: #333;
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}
.wizard-item.completed .wizard-icon {
background: #28a745;
color: white;
}
.wizard-content {
flex: 1;
color: white;
}
.wizard-title {
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 1.1rem;
}
.wizard-description {
font-size: 0.875rem;
opacity: 0.8;
}
.wizard-item.completed .wizard-title {
text-decoration: line-through;
opacity: 0.7;
}
.wizard-progress-bar {
width: 3px;
height: 30px;
background: rgba(255, 255, 255, 0.3);
position: absolute;
left: 29px;
bottom: -2rem;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<div class="col-md-4">
<div class="card border-0 shadow-lg wizard-steps">
<div class="wizard-item completed">
<div class="wizard-icon">
<i class="bi bi-check-circle-fill"></i>
</div>
<div class="wizard-content">
<div class="wizard-title">Configuration initiale</div>
<div class="wizard-description">Configuration de base du projet</div>
</div>
<div class="wizard-progress-bar"></div>
</div>
<div class="wizard-item active">
<div class="wizard-icon">
<i class="bi bi-gear-fill"></i>
</div>
<div class="wizard-content">
<div class="wizard-title">Personnalisation</div>
<div class="wizard-description">Thème et préférences</div>
</div>
<div class="wizard-progress-bar"></div>
</div>
<div class="wizard-item">
<div class="wizard-icon">
<i class="bi bi-people-fill"></i>
</div>
<div class="wizard-content">
<div class="wizard-title">Équipe</div>
<div class="wizard-description">Gestion des membres</div>
</div>
<div class="wizard-progress-bar"></div>
</div>
<div class="wizard-item">
<div class="wizard-icon">
<i class="bi bi-rocket-takeoff-fill"></i>
</div>
<div class="wizard-content">
<div class="wizard-title">Déploiement</div>
<div class="wizard-description">Lancement du projet</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card shadow-lg">
<div class="card-header">
<h5 class="mb-0">Étape 2 : Personnalisation</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Thème</label>
<div class="btn-group w-100">
<button class="btn btn-outline-primary active">Mode Clair</button>
<button class="btn btn-outline-primary">Mode Sombre</button>
<button class="btn btn-outline-primary">Mode Personnalisé</button>
</div>
</div>
<div class="mb-3">
<label class="form-label">Langue</label>
<select class="form-select">
<option>Français</option>
<option>Anglais</option>
<option>Espagnol</option>
</select>
</div>
<button class="btn btn-primary w-100">
Continuer <i class="bi bi-arrow-right ms-2"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Télécharger le fichier source