Bootstrap
Dashboard
Responsive
Card
Html
Template Bootstrap de dashboard entièrement responsive avec cartes adaptatives et mise en page fluide.
<!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>Dashboard Responsive Cards | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--text-dark: #2c3e50;
--text-muted: #7f8c8d;
--bg-light: #f4f6f9;
}
body {
background-color: var(--bg-light);
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
}
.dashboard-card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.card-header-custom {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
color: white;
padding: 15px;
display: flex;
align-items: center;
}
.card-header-custom h5 {
margin: 0;
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 600;
}
.card-header-custom i {
margin-right: 10px;
opacity: 0.8;
}
.card-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #f1f3f5;
}
.card-item:last-child {
border-bottom: none;
}
.card-item-content {
display: flex;
align-items: center;
}
.icon-circle {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
background-color: rgba(37, 117, 252, 0.1);
}
.card-item-details {
flex-grow: 1;
}
.card-item-title {
font-weight: 700;
color: var(--text-dark);
margin-bottom: 5px;
font-size: 0.95rem;
}
.card-item-subtitle {
color: var(--text-muted);
font-size: 0.8rem;
}
.status-badge {
padding: 5px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.status-active {
background-color: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.status-inactive {
background-color: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.status-pending {
background-color: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
@media (max-width: 768px) {
.card-item {
flex-direction: column;
text-align: center;
}
.card-item-content {
flex-direction: column;
align-items: center;
}
.icon-circle {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="container-fluid py-4">
<div class="row">
<!-- 1. Dernières Commandes -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-shopping-cart mr-2"></i>
Dernières Commandes
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-receipt text-primary"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">CMD #8842</div>
<div class="card-item-subtitle">Jean Dupont</div>
</div>
</div>
<span class="status-badge status-pending">En cours</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-check text-success"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">CMD #8841</div>
<div class="card-item-subtitle">Marie Leclerc</div>
</div>
</div>
<span class="status-badge status-active">Livrée</span>
</div>
</div>
</div>
<!-- 2. Derniers Tickets -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-ticket-alt mr-2"></i>
Derniers Tickets
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-exclamation-circle text-danger"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Ticket #9012</div>
<div class="card-item-subtitle">Problème technique</div>
</div>
</div>
<span class="status-badge status-inactive">Urgent</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-check-double text-success"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Ticket #3456</div>
<div class="card-item-subtitle">Support réseau</div>
</div>
</div>
<span class="status-badge status-active">Résolu</span>
</div>
</div>
</div>
<!-- 3. Liste des Utilisateurs -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-users mr-2"></i>
Liste des Utilisateurs
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-user-shield text-info"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Emma Wilson</div>
<div class="card-item-subtitle">Admin</div>
</div>
</div>
<span class="status-badge status-active">Actif</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-user text-warning"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Michael Brown</div>
<div class="card-item-subtitle">Utilisateur</div>
</div>
</div>
<span class="status-badge status-inactive">Inactif</span>
</div>
</div>
</div>
<!-- 4. Activité Utilisateurs -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-chart-line mr-2"></i>
Activité Utilisateurs
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-sign-in-alt text-primary"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Sarah Lee</div>
<div class="card-item-subtitle">Connexion</div>
</div>
</div>
<span class="status-badge status-active">Mobile</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-upload text-success"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">David Kim</div>
<div class="card-item-subtitle">Mise à jour</div>
</div>
</div>
<span class="status-badge status-pending">Desktop</span>
</div>
</div>
</div>
<!-- 5. Modules Disponibles -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-cubes mr-2"></i>
Modules Disponibles
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-users text-primary"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Gestion Utilisateurs</div>
<div class="card-item-subtitle">Contrôle d'accès</div>
</div>
</div>
<span class="status-badge status-active">Actif</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-chart-bar text-warning"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Reporting</div>
<div class="card-item-subtitle">Analytiques</div>
</div>
</div>
<span class="status-badge status-inactive">Inactif</span>
</div>
</div>
</div>
<!-- 6. Configuration App -->
<div class="col-md-6 col-lg-4">
<div class="dashboard-card">
<div class="card-header-custom">
<h5>
<i class="fas fa-cog mr-2"></i>
Configuration App
</h5>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-globe text-info"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Langue</div>
<div class="card-item-subtitle">Paramètres</div>
</div>
</div>
<span class="text-muted font-weight-bold">Français</span>
</div>
<div class="card-item">
<div class="card-item-content">
<div class="icon-circle">
<i class="fas fa-palette text-secondary"></i>
</div>
<div class="card-item-details">
<div class="card-item-title">Thème</div>
<div class="card-item-subtitle">Apparence</div>
</div>
</div>
<span class="text-muted font-weight-bold">Clair</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>