Bootstrap 5
Template
Dashboard Email
Detail
Email View
Dashboard
Dashboard email style Gmail optimisé pour la visualisation et l'interaction. Design moderne 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>Dashbord Email Style Gmail Bootstrap 5 2026 04220331 | AngularForAll</title>
<!-- Bootstrap 5 + Icônes -->
<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">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f6f8fc;
font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
height: 100vh;
overflow: hidden;
}
/* Layout principal style Gmail */
.gmail-wrapper {
display: flex;
height: 100vh;
width: 100%;
}
/* ========== SIDEBAR GAUCHE (Menu Gmail) ========= */
.gmail-sidebar {
width: 280px;
background: #f6f8fc;
padding: 16px 0 16px 8px;
display: flex;
flex-direction: column;
border-right: 1px solid #e0e3e7;
overflow-y: auto;
}
/* Bouton Nouveau message */
.compose-btn {
background: #c2e7ff;
border: none;
border-radius: 16px;
padding: 16px 24px;
margin: 0 16px 16px 8px;
font-weight: 500;
font-size: 15px;
color: #001d35;
display: flex;
align-items: center;
gap: 12px;
transition: box-shadow 0.15s, background 0.15s;
cursor: pointer;
border: 1px solid transparent;
}
.compose-btn:hover {
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.15), 0 4px 8px 3px rgba(60, 64, 67, 0.1);
background: #d3e3fd;
}
.compose-btn i {
font-size: 22px;
}
/* Menu principal */
.nav-menu {
list-style: none;
padding: 0;
margin: 0 8px 0 0;
}
.nav-item {
display: flex;
align-items: center;
padding: 8px 12px 8px 20px;
margin: 2px 0;
border-radius: 0 20px 20px 0;
color: #202124;
font-size: 14px;
font-weight: 500;
transition: background 0.1s;
cursor: pointer;
position: relative;
}
.nav-item i {
width: 24px;
margin-right: 18px;
font-size: 18px;
color: #5f6368;
}
.nav-item.active {
background: #d3e3fd;
color: #001d35;
font-weight: 600;
}
.nav-item.active i {
color: #001d35;
}
.nav-item:hover:not(.active) {
background: #e9eef3;
}
.badge-count {
margin-left: auto;
background: transparent;
color: #5f6368;
font-weight: 500;
font-size: 13px;
padding-right: 8px;
}
.nav-item.active .badge-count {
color: #001d35;
}
/* Séparateur */
.sidebar-divider {
margin: 12px 16px 12px 20px;
border-top: 1px solid #e0e3e7;
}
/* Labels */
.labels-section {
margin-top: 8px;
}
.labels-header {
display: flex;
justify-content: space-between;
padding: 8px 16px 8px 20px;
font-size: 14px;
font-weight: 500;
color: #5f6368;
}
.label-item {
display: flex;
align-items: center;
padding: 6px 12px 6px 20px;
margin: 2px 0;
border-radius: 0 20px 20px 0;
color: #202124;
font-size: 14px;
cursor: pointer;
}
.label-item i {
margin-right: 18px;
font-size: 16px;
width: 24px;
}
.label-item:hover {
background: #e9eef3;
}
/* ========== ZONE PRINCIPALE ========= */
.gmail-main {
flex: 1;
background: #ffffff;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px 0 0 0;
}
/* Header Gmail (barre de recherche + icônes) */
.gmail-header {
padding: 8px 16px 8px 20px;
border-bottom: 1px solid #e8eaed;
display: flex;
align-items: center;
gap: 12px;
background: #ffffff;
}
.hamburger-menu {
font-size: 22px;
color: #5f6368;
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: background 0.15s;
}
.hamburger-menu:hover {
background: #f1f3f4;
}
.gmail-logo {
display: flex;
align-items: center;
gap: 4px;
}
.gmail-logo img {
height: 28px;
}
.gmail-logo span {
font-size: 22px;
color: #5f6368;
font-weight: 400;
}
/* Barre de recherche */
.search-bar {
flex: 1;
max-width: 720px;
background: #eaf1fb;
border-radius: 24px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 12px;
margin: 0 12px;
}
.search-bar i {
color: #5f6368;
font-size: 16px;
}
.search-bar input {
background: transparent;
border: none;
outline: none;
flex: 1;
font-size: 14px;
}
.search-bar input::placeholder {
color: #5f6368;
}
/* Icônes header droite */
.header-icons {
display: flex;
align-items: center;
gap: 12px;
color: #5f6368;
}
.header-icons i {
font-size: 20px;
padding: 8px;
border-radius: 50%;
cursor: pointer;
transition: background 0.15s;
}
.header-icons i:hover {
background: #f1f3f4;
}
.user-avatar {
width: 36px;
height: 36px;
background: #1a73e8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
margin-left: 8px;
cursor: pointer;
}
/* Barre d'outils de la liste d'emails */
.email-toolbar {
padding: 8px 16px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid #e8eaed;
}
.select-all {
display: flex;
align-items: center;
gap: 8px;
}
.toolbar-actions {
display: flex;
gap: 18px;
color: #5f6368;
}
.toolbar-actions i {
font-size: 18px;
cursor: pointer;
padding: 4px;
}
.toolbar-actions i:hover {
color: #202124;
}
.pagination-info {
margin-left: auto;
font-size: 13px;
color: #5f6368;
}
/* Onglets (Principale, Réseaux sociaux, Promotions) */
.email-tabs {
display: flex;
padding: 0 16px;
gap: 24px;
border-bottom: 1px solid #e8eaed;
}
.tab-item {
padding: 12px 0 10px 0;
font-size: 15px;
font-weight: 500;
color: #5f6368;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.15s;
}
.tab-item.active {
color: #1a73e8;
border-bottom-color: #1a73e8;
}
.tab-item i {
margin-right: 8px;
}
.tab-item:hover:not(.active) {
color: #202124;
}
/* Liste des emails */
.email-list {
flex: 1;
overflow-y: auto;
background: #ffffff;
}
.email-row {
display: flex;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid #e8eaed;
cursor: pointer;
background: #ffffff;
transition: box-shadow 0.1s;
}
.email-row:hover {
box-shadow: inset 0 -1px 0 0 #e8eaed, 0 1px 3px 0 rgba(60,64,67,0.1);
background: #fafbfc;
}
.email-row.unread {
background: #f2f6fc;
font-weight: 500;
}
.email-checkbox {
margin-right: 12px;
}
.star-icon {
color: #e8eaed;
margin-right: 16px;
font-size: 18px;
cursor: pointer;
}
.star-icon.starred {
color: #fbbc04;
}
.email-sender {
min-width: 180px;
max-width: 200px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 16px;
}
.email-subject-snippet {
display: flex;
flex: 1;
min-width: 0;
font-size: 14px;
}
.email-subject {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.email-snippet {
color: #5f6368;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 8px;
}
.unread .email-subject {
font-weight: 700;
color: #202124;
}
.unread .email-sender {
font-weight: 700;
color: #202124;
}
.email-attachment {
margin-left: 12px;
color: #5f6368;
font-size: 16px;
}
.email-date {
margin-left: 16px;
font-size: 13px;
color: #5f6368;
min-width: 60px;
text-align: right;
}
.unread .email-date {
font-weight: 600;
color: #202124;
}
/* Footer */
.gmail-footer {
padding: 12px 16px;
border-top: 1px solid #e8eaed;
font-size: 13px;
color: #5f6368;
display: flex;
justify-content: space-between;
}
.storage-info {
display: flex;
align-items: center;
gap: 12px;
}
.progress {
width: 100px;
height: 6px;
}
/* Responsive */
@media (max-width: 768px) {
.gmail-sidebar {
position: absolute;
left: -280px;
z-index: 1000;
height: 100%;
box-shadow: 2px 0 12px rgba(0,0,0,0.1);
transition: left 0.2s;
}
.email-sender {
min-width: 120px;
}
}
</style>
</head>
<body>
<div class="gmail-wrapper">
<!-- ========== SIDEBAR MENU GMAIL ========= -->
<div class="gmail-sidebar">
<!-- Bouton Nouveau message -->
<div class="compose-btn">
<i class="bi bi-pencil-square"></i>
<span>Nouveau message</span>
</div>
<!-- Menu principal -->
<ul class="nav-menu">
<li class="nav-item active">
<i class="bi bi-inbox"></i>
<span>Boîte de réception</span>
<span class="badge-count">1 284</span>
</li>
<li class="nav-item">
<i class="bi bi-star"></i>
<span>Suivis</span>
<span class="badge-count">8</span>
</li>
<li class="nav-item">
<i class="bi bi-clock"></i>
<span>Différés</span>
<span class="badge-count">3</span>
</li>
<li class="nav-item">
<i class="bi bi-send-check"></i>
<span>Important</span>
<span class="badge-count">12</span>
</li>
<li class="nav-item">
<i class="bi bi-send"></i>
<span>Messages envoyés</span>
</li>
<li class="nav-item">
<i class="bi bi-file-earmark-text"></i>
<span>Brouillons</span>
<span class="badge-count">5</span>
</li>
<li class="nav-item">
<i class="bi bi-archive"></i>
<span>Tous les messages</span>
</li>
</ul>
<div class="sidebar-divider"></div>
<!-- Catégories -->
<ul class="nav-menu">
<li class="nav-item">
<i class="bi bi-exclamation-octagon"></i>
<span>Spam</span>
<span class="badge-count">42</span>
</li>
<li class="nav-item">
<i class="bi bi-trash3"></i>
<span>Corbeille</span>
</li>
</ul>
<div class="sidebar-divider"></div>
<!-- Labels -->
<div class="labels-section">
<div class="labels-header">
<span>Libellés</span>
<i class="bi bi-plus"></i>
</div>
<div class="label-item">
<i class="bi bi-tag-fill" style="color: #1a73e8;"></i>
<span>Projet Alpha</span>
</div>
<div class="label-item">
<i class="bi bi-tag-fill" style="color: #ea4335;"></i>
<span>Urgent</span>
</div>
<div class="label-item">
<i class="bi bi-tag-fill" style="color: #34a853;"></i>
<span>Clients</span>
</div>
<div class="label-item">
<i class="bi bi-tag-fill" style="color: #fbbc04;"></i>
<span>Personnel</span>
</div>
</div>
</div>
<!-- ========== ZONE PRINCIPALE (Liste emails) ========= -->
<div class="gmail-main">
<!-- Header avec logo et recherche -->
<div class="gmail-header">
<div class="hamburger-menu">
<i class="bi bi-list"></i>
</div>
<div class="gmail-logo">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EA4335' d='M12 13.5L2 6.5V18h20V6.5l-10 7z'/%3E%3Cpath fill='%234285F4' d='M12 13.5L22 6.5V5c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v1.5l10 7z'/%3E%3C/svg%3E" alt="Gmail" style="height: 24px;">
<span>Gmail</span>
</div>
<div class="search-bar">
<i class="bi bi-search"></i>
<input type="text" placeholder="Rechercher dans vos e-mails">
<i class="bi bi-sliders2"></i>
</div>
<div class="header-icons">
<i class="bi bi-question-circle"></i>
<i class="bi bi-gear"></i>
<i class="bi bi-grid-3x3-gap-fill"></i>
<div class="user-avatar">
<span>TC</span>
</div>
</div>
</div>
<!-- Barre d'outils -->
<div class="email-toolbar">
<div class="select-all">
<input type="checkbox" class="form-check-input" id="selectAll">
<i class="bi bi-chevron-down ms-1"></i>
</div>
<div class="toolbar-actions">
<i class="bi bi-arrow-counterclockwise" title="Actualiser"></i>
<i class="bi bi-three-dots-vertical" title="Plus"></i>
<i class="bi bi-archive" title="Archiver"></i>
<i class="bi bi-exclamation-circle" title="Spam"></i>
<i class="bi bi-trash3" title="Supprimer"></i>
</div>
<div class="pagination-info">
1-50 sur 1 284
<i class="bi bi-chevron-left ms-3"></i>
<i class="bi bi-chevron-right ms-2"></i>
</div>
</div>
<!-- Onglets -->
<div class="email-tabs">
<div class="tab-item active">
<i class="bi bi-inbox"></i> Principale
</div>
<div class="tab-item">
<i class="bi bi-people"></i> Réseaux sociaux
</div>
<div class="tab-item">
<i class="bi bi-tags"></i> Promotions
</div>
<div class="tab-item">
<i class="bi bi-chat"></i> Forums
</div>
</div>
<!-- Liste des emails -->
<div class="email-list">
<!-- Email 1 - Non lu -->
<div class="email-row unread">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">Marie Dupont</span>
<div class="email-subject-snippet">
<span class="email-subject">Invitation : Revue de projet Google Workspace</span>
<span class="email-snippet"> - Bonjour l'équipe, je vous confirme notre revue de projet ce mardi...</span>
</div>
<i class="bi bi-paperclip email-attachment"></i>
<span class="email-date">14:30</span>
</div>
<!-- Email 2 - Lu -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon starred"></i>
<span class="email-sender">Google</span>
<div class="email-subject-snippet">
<span class="email-subject">Votre récapitulatif de sécurité mensuel</span>
<span class="email-snippet"> - Aucune activité suspecte détectée sur votre compte...</span>
</div>
<i class="bi bi-paperclip email-attachment"></i>
<span class="email-date">12:15</span>
</div>
<!-- Email 3 - Non lu, important -->
<div class="email-row unread">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star-fill star-icon starred" style="color: #fbbc04;"></i>
<span class="email-sender">GitHub</span>
<div class="email-subject-snippet">
<span class="email-subject">[Action requise] Mise à jour de vos clés SSH</span>
<span class="email-snippet"> - Nous avons détecté que votre clé SSH expire dans 7 jours...</span>
</div>
<span class="email-date">09:45</span>
</div>
<!-- Email 4 - Brouillon -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender" style="color: #d93025;"><i class="bi bi-pencil-square me-1"></i>Brouillon</span>
<div class="email-subject-snippet">
<span class="email-subject">Proposition commerciale - Client ABC</span>
<span class="email-snippet"> - Suite à notre entretien téléphonique, veuillez trouver ci-joint...</span>
</div>
<span class="email-date">Brouillon</span>
</div>
<!-- Email 5 -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">LinkedIn</span>
<div class="email-subject-snippet">
<span class="email-subject">Thomas, 3 personnes ont consulté votre profil</span>
<span class="email-snippet"> - Découvrez qui a consulté votre profil cette semaine...</span>
</div>
<span class="email-date">Hier</span>
</div>
<!-- Email 6 - Avec pièce jointe -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">Julien Moreau</span>
<div class="email-subject-snippet">
<span class="email-subject">Facture Mars 2026 - Projet Phoenix</span>
<span class="email-snippet"> - Bonjour Thomas, ci-joint la facture pour le mois de mars...</span>
</div>
<i class="bi bi-paperclip email-attachment"></i>
<span class="email-date">Hier</span>
</div>
<!-- Email 7 - Non lu -->
<div class="email-row unread">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">Sophie Lambert</span>
<div class="email-subject-snippet">
<span class="email-subject">Documents pour la réunion de demain</span>
<span class="email-snippet"> - Comme promis, voici les slides et le compte-rendu...</span>
</div>
<i class="bi bi-paperclip email-attachment"></i>
<span class="email-date">22 avr.</span>
</div>
<!-- Email 8 -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">Google Workspace</span>
<div class="email-subject-snippet">
<span class="email-subject">Nouvelles fonctionnalités dans Google Drive</span>
<span class="email-snippet"> - Découvrez les dernières améliorations de productivité...</span>
</div>
<span class="email-date">21 avr.</span>
</div>
<!-- Email 9 - Spam (exemple) -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon"></i>
<span class="email-sender">Amazon Web Services</span>
<div class="email-subject-snippet">
<span class="email-subject">Votre facture AWS - Avril 2026</span>
<span class="email-snippet"> - Votre facture AWS pour la période du 1er au 30 avril...</span>
</div>
<span class="email-date">20 avr.</span>
</div>
<!-- Email 10 -->
<div class="email-row">
<input type="checkbox" class="form-check-input email-checkbox">
<i class="bi bi-star star-icon starred"></i>
<span class="email-sender">Équipe RH</span>
<div class="email-subject-snippet">
<span class="email-subject">Invitation : Team building - 15 mai</span>
<span class="email-snippet"> - Nous organisons une journée team building, merci de confirmer...</span>
</div>
<i class="bi bi-calendar3 email-attachment"></i>
<span class="email-date">19 avr.</span>
</div>
</div>
<!-- Footer -->
<div class="gmail-footer">
<div class="storage-info">
<span>3,2 Go utilisés sur 15 Go</span>
<div class="progress">
<div class="progress-bar bg-primary" style="width: 21%"></div>
</div>
<a href="#" style="color: #1a73e8; text-decoration: none; font-weight: 500;">Gérer</a>
</div>
<div>
<span>Conditions · Confidentialité · Programme Workspace</span>
</div>
</div>
</div>
</div>
<script>
// Interaction simple pour la sélection
document.getElementById('selectAll')?.addEventListener('change', function(e) {
document.querySelectorAll('.email-checkbox').forEach(cb => {
cb.checked = e.target.checked;
});
});
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur