Bootstrap
Bootstrap4
Dashboard
Css
Styling
Html
Composants et styles Bootstrap 4 optimisés pour dashboard avec CSS personnalisé et design cohérent.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NiceAdmin Clone - Header, Sidebar, Footer</title>
<!-- Bootstrap 5 CSS + Icons + Google Fonts (comme dans NiceAdmin) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- SimpleBar CSS pour le scroll personnalisé (optionnel mais présent dans NiceAdmin) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.9/dist/simplebar.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', 'Nunito', sans-serif;
background: #f6f9ff;
overflow-x: hidden;
}
/* ========== LAYOUT PRINCIPAL ========== */
.wrapper {
display: flex;
width: 100%;
min-height: 100vh;
}
/* ========== SIDEBAR (ASIDE) ========== */
.sidebar {
width: 300px;
background: #ffffff;
box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
transition: all 0.3s ease;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
overflow-y: auto;
border-right: 1px solid #eef2f6;
}
/* Scrollbar personnalisée */
.sidebar::-webkit-scrollbar {
width: 6px;
}
.sidebar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.sidebar::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 8px;
}
/* Logo / Brand */
.sidebar .logo {
display: flex;
align-items: center;
padding: 20px 20px 10px 20px;
border-bottom: 1px solid #f0f3f8;
margin-bottom: 20px;
}
.sidebar .logo img {
max-height: 32px;
margin-right: 10px;
}
.sidebar .logo span {
font-size: 26px;
font-weight: 700;
color: #012970;
font-family: 'Nunito', sans-serif;
}
/* Navigation menu */
.nav-menu {
padding: 0 20px;
}
.nav-menu .nav-item {
margin-bottom: 5px;
}
.nav-menu .nav-link {
display: flex;
align-items: center;
padding: 12px 16px;
font-size: 15px;
font-weight: 500;
color: #415a77;
border-radius: 8px;
transition: 0.2s;
text-decoration: none;
}
.nav-menu .nav-link i {
font-size: 20px;
margin-right: 12px;
color: #7c8ea0;
}
.nav-menu .nav-link span {
flex: 1;
}
.nav-menu .nav-link .badge {
background: #eef2f6;
color: #415a77;
font-size: 12px;
padding: 2px 8px;
border-radius: 20px;
}
.nav-menu .nav-link:hover {
background: #f6f9ff;
color: #415a77;
}
.nav-menu .nav-link.active {
background: #f6f9ff;
color: #012970;
}
.nav-menu .nav-link.active i {
color: #415a77;
}
.nav-heading {
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
color: #899bbd;
padding: 10px 16px;
margin-top: 15px;
}
/* ========== MAIN CONTENT ========== */
.main-content {
flex: 1;
margin-left: 300px;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ========== HEADER ========== */
.header {
background: #ffffff;
padding: 12px 30px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #eef2f6;
position: sticky;
top: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Toggle button pour mobile (responsive) */
.mobile-toggle {
font-size: 28px;
cursor: pointer;
color: #012970;
display: none;
background: transparent;
border: none;
}
.search-bar {
display: flex;
align-items: center;
background: #f6f9ff;
padding: 6px 16px;
border-radius: 40px;
border: 1px solid #eef2f6;
}
.search-bar input {
border: none;
background: transparent;
outline: none;
padding: 6px 0;
width: 240px;
font-size: 14px;
}
.search-bar button {
background: transparent;
border: none;
color: #415a77;
}
.header-icons {
display: flex;
align-items: center;
gap: 20px;
}
.header-icons .icon-link {
position: relative;
font-size: 22px;
color: #5e6e85;
text-decoration: none;
transition: 0.2s;
}
.header-icons .icon-link:hover {
color: #012970;
}
.badge-notif {
position: absolute;
top: -6px;
right: -10px;
background: #e23e57;
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 20px;
font-weight: 600;
}
.avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: #eef2f6;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #012970;
}
/* ========== PAGE VIDE (CONTENT) ========== */
.page-content {
flex: 1;
padding: 30px;
background: #f6f9ff;
}
.empty-state {
background: #ffffff;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
padding: 60px 20px;
text-align: center;
border: 1px solid #eef2f6;
height: 100%;
min-height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.empty-state i {
font-size: 72px;
color: #d3dcec;
margin-bottom: 20px;
}
.empty-state h4 {
color: #012970;
font-weight: 600;
margin-bottom: 12px;
}
.empty-state p {
color: #6c757d;
max-width: 400px;
}
/* ========== FOOTER ========== */
.footer {
background: #ffffff;
padding: 18px 30px;
border-top: 1px solid #eef2f6;
font-size: 14px;
color: #5e6e85;
text-align: center;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 992px) {
.sidebar {
margin-left: -300px;
transition: 0.3s;
}
.sidebar.active {
margin-left: 0;
}
.main-content {
margin-left: 0;
}
.mobile-toggle {
display: block;
}
.search-bar input {
width: 140px;
}
}
@media (max-width: 576px) {
.header {
padding: 10px 16px;
}
.search-bar {
display: none;
}
.page-content {
padding: 20px;
}
}
/* Utilitaire pour le contenu scrollable du sidebar */
.simplebar-scrollbar:before {
background: #cbd5e1;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- ASIDE BAR (SIDEBAR) -->
<aside class="sidebar" id="sidebar">
<div class="logo">
<!-- Logo SVG inline comme dans le template NiceAdmin (simplifié) -->
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%234158a7'/%3E%3Cpath fill='%23ffffff' d='M30,40 L45,25 L60,40 L55,45 L45,35 L35,45 Z M40,55 L55,40 L70,55 L65,60 L55,50 L45,60 Z'/%3E%3C/svg%3E" alt="Logo">
<span>NiceAdmin</span>
</div>
<div class="nav-menu">
<div class="nav-heading">Navigation</div>
<div class="nav-item">
<a href="#" class="nav-link active">
<i class="bi bi-grid"></i>
<span>Dashboard</span>
<span class="badge">Pro</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-file-earmark-text"></i>
<span>Pages</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-people"></i>
<span>Users</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-graph-up"></i>
<span>Charts</span>
</a>
</div>
<div class="nav-heading">COMPOSANTS</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-calendar"></i>
<span>Calendar</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-envelope"></i>
<span>Mail</span>
<span class="badge">12</span>
</a>
</div>
<div class="nav-item">
<a href="#" class="nav-link">
<i class="bi bi-gear"></i>
<span>Settings</span>
</a>
</div>
</div>
</aside>
<!-- MAIN CONTENT (Header + Page vide + Footer) -->
<div class="main-content">
<!-- HEADER (identique à NiceAdmin) -->
<header class="header">
<button class="mobile-toggle" id="mobileToggleBtn"><i class="bi bi-list"></i></button>
<div class="search-bar">
<input type="text" placeholder="Rechercher...">
<button><i class="bi bi-search"></i></button>
</div>
<div class="header-icons">
<a href="#" class="icon-link">
<i class="bi bi-bell"></i>
<span class="badge-notif">3</span>
</a>
<a href="#" class="icon-link">
<i class="bi bi-chat-dots"></i>
</a>
<div class="avatar">
<i class="bi bi-person-circle" style="font-size: 32px;"></i>
</div>
</div>
</header>
<!-- PAGE VIDE (contenu central) -->
<div class="page-content">
<div class="empty-state">
<i class="bi bi-folder2-open"></i>
<h4>Bienvenue sur NiceAdmin</h4>
<p>Cette zone est intentionnellement vide. Vous pouvez y intégrer vos propres composants, graphiques ou tableaux.</p>
<button class="btn btn-outline-primary mt-3" style="border-radius: 30px; padding: 8px 24px;">
<i class="bi bi-plus-circle"></i> Commencer
</button>
</div>
</div>
<!-- FOOTER (comme sur NiceAdmin) -->
<footer class="footer">
<div>© Copyright <strong><span>NiceAdmin</span></strong>. Tous droits réservés</div>
<div class="mt-1">Conçu par <a href="#" style="color:#415a77; text-decoration: none;">BootstrapMade</a></div>
</footer>
</div>
</div>
<!-- Scripts: Bootstrap JS, SimpleBar (optionnel mais pour respecter le style), et toggle mobile -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simplebar@5.3.9/dist/simplebar.min.js"></script>
<script>
// Toggle pour la sidebar en mode mobile (comportement responsive)
const toggleBtn = document.getElementById('mobileToggleBtn');
const sidebar = document.getElementById('sidebar');
if (toggleBtn) {
toggleBtn.addEventListener('click', function(e) {
e.preventDefault();
sidebar.classList.toggle('active');
});
}
// Fermer la sidebar si on clique sur un lien interne (optionnel pour meilleure UX mobile)
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function() {
if (window.innerWidth <= 992) {
sidebar.classList.remove('active');
}
});
});
// Gérer le scroll personnalisé simplebar (optionnel)
if (typeof SimpleBar !== 'undefined') {
new SimpleBar(document.getElementById('sidebar'));
}
// Petite simulation pour l'état actif au clic (juste un effet visuel)
const allNavLinks = document.querySelectorAll('.nav-link');
allNavLinks.forEach(link => {
link.addEventListener('click', function(e) {
// Si c'est un lien réel avec href="#", on évite le scroll vers le haut par défaut
if (this.getAttribute('href') === '#') {
e.preventDefault();
}
// Retirer la classe active de tous
allNavLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>