Bootstrap
Card
Widget
Dashboard
Html
Grille Bootstrap de 6 widgets minimalistes avec icônes, chiffres clés et indicateurs de tendance.
<!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>6 Cartes Minimalistes| AngularForAll</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<!-- IcoFont -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icofont@2.0.0/css/icofont.min.css" />
<style>
/* --- Styles globaux et variables pour les widgets --- */
:root {
--soft-bg: #f8f9fa;
--border-color: #edf2f9;
--text-main: #2b3445;
--text-muted: #7d879c;
--widget-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
--widget-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* Base Widget Card */
.widget-card {
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-shadow: var(--widget-shadow);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.02);
margin-bottom: 24px;
height: calc(100% - 24px);
}
.widget-card:hover {
transform: translateY(-4px);
box-shadow: var(--widget-shadow-hover);
}
.widget-header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.widget-header h5 {
font-weight: 600;
color: var(--text-main);
margin: 0;
font-size: 1.1rem;
}
.widget-header i {
font-size: 1.5rem;
margin-right: 12px;
color: #4e73df;
background: #f0f4ff;
padding: 8px;
border-radius: 8px;
}
/* Grille pour remplacer les tableaux (Responsive Wrapper) */
.widget-grid-wrapper {
overflow-x: auto;
}
.widget-grid-wrapper::-webkit-scrollbar {
height: 6px;
}
.widget-grid-wrapper::-webkit-scrollbar-thumb {
background: #e2e8f0;
border-radius: 10px;
}
/* En-têtes des listes */
.list-head {
font-weight: 600;
color: var(--text-muted);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border-color);
margin-bottom: 10px;
}
/* Lignes de données */
.list-row {
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.9rem;
color: var(--text-main);
transition: background 0.2s;
align-items: center;
}
.list-row:last-child {
border-bottom: none;
}
.list-row:hover {
background: #fafbfc;
border-radius: 6px;
padding-left: 8px; /* Effet de hover léger */
margin-left: -8px;
}
/* Badges aux couleurs douces */
.badge-soft {
padding: 6px 10px;
border-radius: 6px;
font-weight: 500;
font-size: 0.8rem;
}
.soft-success {
background-color: #d1e7dd;
color: #0f5132;
}
.soft-warning {
background-color: #fff3cd;
color: #664d03;
}
.soft-danger {
background-color: #f8d7da;
color: #842029;
}
.soft-info {
background-color: #cff4fc;
color: #055160;
}
.soft-primary {
background-color: #cfe2ff;
color: #084298;
}
/* ---------------------------------------------------
CLASSES UNIQUES POUR CHAQUE WIDGET (Configuration Grid)
--------------------------------------------------- */
/* Card 1 : Dernières commandes */
.widget-orders .list-head,
.widget-orders .list-row {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr 1.2fr 1.2fr;
gap: 15px;
min-width: 600px; /* Force le scroll sur mobile */
}
/* Card 2 : Derniers tickets */
.widget-tickets .list-head,
.widget-tickets .list-row {
display: grid;
grid-template-columns: 1fr 2fr 1.5fr 1fr 1fr;
gap: 15px;
min-width: 600px;
}
/* Card 3 : Users List */
.widget-users .list-head,
.widget-users .list-row {
display: grid;
grid-template-columns: 1.5fr 0.8fr 1.2fr 1fr 1fr;
gap: 15px;
min-width: 600px;
}
/* Card 4 : Users activity */
.widget-activity .list-head,
.widget-activity .list-row {
display: grid;
grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr 1fr;
gap: 15px;
min-width: 600px;
}
/* Card 5 : Module disponible & Card 6 : Configuration (Style Liste Simple) */
.widget-simple-list .list-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 12px;
}
.widget-simple-list .item-left {
display: flex;
align-items: center;
gap: 15px;
}
.widget-simple-list .item-icon {
width: 45px;
height: 45px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.icon-bg-1 {
background: #e0f2fe;
color: #0284c7;
}
.icon-bg-2 {
background: #fce7f3;
color: #db2777;
}
.icon-bg-3 {
background: #fef3c7;
color: #d97706;
}
.icon-bg-4 {
background: #dcfce7;
color: #16a34a;
}
</style>
</head>
<body>
<div class="container-fluid py-4" style="background-color: #f4f7f6; min-height: 100vh">
<div class="row">
<div class="col-xl-6 col-lg-12">
<div class="widget-card widget-orders">
<div class="widget-header">
<i class="icofont-cart-alt"></i>
<h5>Dernières commandes</h5>
</div>
<div class="widget-grid-wrapper">
<div class="list-head">
<div>N° Commande</div>
<div>Créé par</div>
<div>Date</div>
<div>Statut Commande</div>
<div>Statut Paiement</div>
</div>
<div class="list-row">
<div><strong>#CMD-908</strong></div>
<div>Jean Dupont</div>
<div class="text-muted">12 Mars 2026</div>
<div><span class="badge-soft soft-primary">En cours</span></div>
<div><span class="badge-soft soft-success">Payé</span></div>
</div>
<div class="list-row">
<div><strong>#CMD-907</strong></div>
<div>Alice Martin</div>
<div class="text-muted">10 Mars 2026</div>
<div><span class="badge-soft soft-success">Livrée</span></div>
<div><span class="badge-soft soft-warning">En attente</span></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="widget-card widget-tickets">
<div class="widget-header">
<i class="icofont-support-faq"></i>
<h5>Derniers tickets</h5>
</div>
<div class="widget-grid-wrapper">
<div class="list-head">
<div>N° Support</div>
<div>Objet</div>
<div>Créé par</div>
<div>Date</div>
<div>Statut</div>
</div>
<div class="list-row">
<div><strong>#TCK-044</strong></div>
<div class="text-truncate">Problème de connexion API</div>
<div>Marc L.</div>
<div class="text-muted">Aujourd'hui</div>
<div><span class="badge-soft soft-danger">Urgent</span></div>
</div>
<div class="list-row">
<div><strong>#TCK-043</strong></div>
<div class="text-truncate">Mise à jour profil impossible</div>
<div>Sophie T.</div>
<div class="text-muted">Hier</div>
<div><span class="badge-soft soft-info">Ouvert</span></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="widget-card widget-users">
<div class="widget-header">
<i class="icofont-users-alt-2"></i>
<h5>Liste des utilisateurs</h5>
</div>
<div class="widget-grid-wrapper">
<div class="list-head">
<div>Nom complet</div>
<div>Civilité</div>
<div>Rôle</div>
<div>Permissions</div>
<div>Statut</div>
</div>
<div class="list-row">
<div><strong>Emma Bernard</strong></div>
<div>Mme</div>
<div>Administrateur</div>
<div>Total (All)</div>
<div><span class="badge-soft soft-success">Actif</span></div>
</div>
<div class="list-row">
<div><strong>Paul Durand</strong></div>
<div>M.</div>
<div>Editeur</div>
<div>Lecture/Écriture</div>
<div><span class="badge-soft soft-warning">Inactif</span></div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-12">
<div class="widget-card widget-activity">
<div class="widget-header">
<i class="icofont-pulse"></i>
<h5>Activité des utilisateurs</h5>
</div>
<div class="widget-grid-wrapper">
<div class="list-head">
<div>Utilisateurs</div>
<div>Date / Heure</div>
<div>Opération</div>
<div>Catégorie</div>
<div>Appareil</div>
</div>
<div class="list-row">
<div>Emma Bernard</div>
<div class="text-muted">12 Mars, 10:45</div>
<div>Connexion réussie</div>
<div>Auth</div>
<div>
<i class="icofont-laptop text-muted mr-1"></i>
Mac
</div>
</div>
<div class="list-row">
<div>Paul Durand</div>
<div class="text-muted">12 Mars, 09:12</div>
<div>Export PDF</div>
<div>Rapports</div>
<div>
<i class="icofont-smart-phone text-muted mr-1"></i>
Mobile
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="widget-card widget-simple-list">
<div class="widget-header">
<i class="icofont-cubes"></i>
<h5>Modules disponibles</h5>
</div>
<div class="list-row">
<div class="item-left">
<div class="item-icon icon-bg-1"><i class="icofont-bill"></i></div>
<div>
<strong>Système de Facturation</strong>
<div class="text-muted small">Générez des devis et factures</div>
</div>
</div>
<div><span class="badge-soft soft-success">Activé</span></div>
</div>
<div class="list-row">
<div class="item-left">
<div class="item-icon icon-bg-2"><i class="icofont-chart-pie-alt"></i></div>
<div>
<strong>Analytique Avancée</strong>
<div class="text-muted small">Statistiques détaillées</div>
</div>
</div>
<div>
<span class="badge-soft soft-muted" style="background: #e2e8f0; color: #475569">
Désactivé
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="widget-card widget-simple-list">
<div class="widget-header">
<i class="icofont-ui-settings"></i>
<h5>Configuration Application</h5>
</div>
<div class="list-row">
<div class="item-left">
<div class="item-icon icon-bg-3"><i class="icofont-globe"></i></div>
<div>
<strong>Langue par défaut</strong>
</div>
</div>
<div class="font-weight-bold text-primary">Français (FR)</div>
</div>
<div class="list-row">
<div class="item-left">
<div class="item-icon icon-bg-4"><i class="icofont-ui-theme"></i></div>
<div>
<strong>Thème de l'interface</strong>
</div>
</div>
<div class="font-weight-bold text-main">Mode Clair</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>