Sample dashboard Design
5 min readJan 3, 2023
With side menu, using bootstrap,css.
Result
side menu
mobile view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<title>Dashboard</title>
<style>
</style>
</head>
<body>
<div class=" container-fluid p-5 mb-4 bg-warning-subtle text-emphasis-danger bg-opacity-10px"
style="width: 100%; height: 900px;">
<div class="container bg-light text-dark ms-auto t-3 " style="border-radius:20px; height: 800px;">
<section class="mid-section">
<div class="container ">
<div class="row">
<div class="col-sm-12">
<!-- toggler -->
<button class="btn float-start" data-bs-toggle="offcanvas" data-bs-target="#myoffcanvas" aria-control="#myoffcanvas" role="button">
<i class="bi bi-arrow-right-square-fill fs-3" data-bs-toggle="myoffcanvas" data-bs-target="#myoffcanvas"></i>
</button>
</div>
</div>
<!-- offcanvas -->
<div class="row">
<div class="col-lg-12">
<!-- <img src="image/logo.png" class="mx-start d-none d-md-block h-50 " aria-hidden="true"></br>
<span >
<img src="image/logo1.png" class="mx-start d-none d-md-block h-25" aria-hidden="true">
</span> -->
<div class="offcanvas offcanvas-start bg-warning-subtle text-emphasis-danger bg-opacity-10px sidebar"
tabindex="-1" id="myoffcanvas" aria-labelledby="myoffcanvas" style="width:18%;">
<div class="offcanvas-header py-5">
<button type="button" class="btn-close " data-bs-dismiss="offcanvas"
aria-level="close"></button>
</div>
<div class="offcanvas-body menu">
<nav>
<ul class="navbar-nav m-2">
<li>
<a href="home.html" class="nav-link ">
<span><i class="bi bi-house-door" style="font-size: 2rem"></i></span>
Home</a>
</li>
<li>
<a href="#" class="nav-link ">
<span><i class="bi bi-alarm" style="font-size: 2rem"></i></span>
<span></span>
</a>
</li>
<li>
<a href="#" class="nav-link ">
<span><i class="bi bi-folder" style="font-size: 2rem"></i></span>
<span></span>
</a>
</li>
<li>
<a href="#" class="nav-link ">
<span><i class="bi bi-distribute-horizontal"
style="font-size: 2rem"></i></span>
<span></span>
</a>
</li>
<li>
<a href="#" class="nav-link ">
<span><i class="bi bi-folder2" style="font-size: 2rem"></i></span>
<span></span>
</a>
</li>
<li> <a href="#" class="nav-link py-5">
<span><i class="bi bi-chat-dots-fill text-danger"
style="font-size: 2rem;"></i></span>
<span></span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- end offcanvas -->
<div class="row justify-content-center">
<div class="col-lg-12 text-start d-flex">
<div class="col-lg-2">
<img src="image/logo.png" class="mx-start d-none d-md-block h-35 p-3 w-25 ms-5 mt-5 "
aria-hidden="true"></br>
<span>
<img src="image/logo1.png" class="mx-start d-none d-md-block h-25 ms-5 "
aria-hidden="true">
</span>
</div>
<div class="bgimage col-lg-10 mt-4">
<img src="image/mehmet1.png" class="ms-1 img-fluid" alt="" width="500px" height="150px">
</div>
</div>
<!-- card start -->
<div class="contaoner">
<div class="row mt-3">
<div class="col-lg-2"></div>
<div class="col-lg-5 d-flex">
<div class="col-md-4 p-1">
<div class="card " style="height: 150px; border-radius: 25px;">
<div class="card-body text-center">
<img src="image/camara.png">
<p style=" margin: 20px 0px 15px 0px; font-size: 10px;">Photo</p>
<h2 style="margin-top: -14px;">200</h2>
</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card" style="height: 150px; border-radius: 25px;">
<div class="card-body text-center">
<img src="image/u-icon.png">
<p style=" margin: 20px 0px 15px 0px; font-size: 10px;">Photo</p>
<h2 style="margin-top: -14px;">200</h2>
</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card" style="height: 150px; border-radius: 25px;">
<div class="card-body text-center">
<img src="image/circle.png">
<p style=" margin: 20px 0px 15px 0px; font-size: 10px;">Address</p>
<h2 style="margin-top: -14px;"> 34</h2>
</div>
</div>
</div>
</div>
<div class="col-lg-5 d-flex">
<div class="col-md-4 p-1">
<div class="card"
style="height: 150px; border-radius: 25px; background-color: #ca194d" ;>
<div class="card-body text-center text-light">
<img src="image/square.png">
<p style=" margin: 20px 0px 15px 0px; font-size: 10px;">Propertylettings
</p>
<h2 style="margin-top: -14px;">345</h2>
</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card" style="height: 150px; border-radius: 25px;">
<div class="card-body text-center py-5">
<img src="image/add.png">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<!-- end -->
<!-- after card -->
<div class="row mt-3 d-flex">
<div class="col-md-2"></div>
<div class="col-md-5">
<div class="col-lg-12">
<div class="row">
<div class="col-sm-12 text-center d-flex justify-content-between">
<p>Filter <b>Property</b></p>
<p class="ms-">New Property</p>
</div>
</div>
<div class="card">
<div class="card-body d-flex">
<div class="col-sm-4">
<h6>BigHeadHouse</h6>
<p style="font-size: 9px;">There are many variation of</br> passages
</p>
</div>
<div class="col-sm-4"><img src="image/building-1.png"
class="mx-start d-none d-md-block text-center"></div>
<div class=" col-sm-4 ms-5 float-end">
<button type="button" name="btn" aria-hidden="rtue"
class="rounded-pill btn btn-warning">Home</button>
<p><b>$450,000</b></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 mt-">
<div class="col-lg-3 h-50 w-25">
<img src="image/show-100.png">
</div>
</div>
</div>
<!-- end -->
<!-- after -->
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-5 ">
<div class="col-lg-12">
<div class="card">
<div class="card-body d-flex">
<div class="col-sm-4">
<h6>RoseVilla</h6>
<p style="font-size: 9px;">There are many variation of</br> passages
</p>
</div>
<div class="col-sm-4"><img src="image/building-2.png"
class="mx-start d-none d-md-block text-center"></div>
<div class=" col-sm-4 ms-4">
<button type="button" name="btn" aria-hidden="rtue"
class="rounded-pill btn btn-warning">Apartment</button>
<p class="ms-3"><b>$450,000</b></p>
</div>
</div>
<!-- mini card -->
<div class="row ">
<div class="col-md-4 ">
<div class="card "
style="justify-content: center; height: 65px; padding-top: 15px; background-color: #ca194d">
<div class="card-body d-flex text-light"
style="justify-content: center;">
<div>
<p>Age <br><span><b>10</b></span></p>
</div>
<div class="ms-1">
<p><i class="bi bi-house-heart"></i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card "
style="justify-content: center; height: 65px; padding-top: 15px; background-color: #ca194d">
<div class="card-body d-flex text-light"
style="justify-content: center;">
<div>
<p>Lond <br><span><b>10</b></span></p>
</div>
<div class="ms-1">
<p><i class="bi bi-building"></i></p>
</div>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="card "
style="justify-content: center; height: 65px; padding-top: 15px; background-color: #ca194d">
<div class="card-body d-flex text-light"
style="justify-content: center;">
<div>
<p>Size <br><span><b>180</b></span></p>
</div>
<div class="ms-1">
<p><i class="bi bi-graph-up"></i></p>
</div>
</div>
</div>
</div>
</div>
<!-- end -->
</div>
</div>
</div>
<div class="col-md-5"></div>
</div>
</div>
</body>
</html>