Repository: themesberg/simple-bootstrap-5-dashboard
Branch: master
Commit: 1999de73bbf2
Files: 3
Total size: 21.0 KB
Directory structure:
gitextract_a68cb7r1/
├── LICENSE.md
├── README.md
└── index.html
================================================
FILE CONTENTS
================================================
================================================
FILE: LICENSE.md
================================================
Copyright 2020 [Themesberg](https://themesberg.com) (Crafty Dwarf LLC)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
# [🔥 Black Friday 2022 - Get Bootstrap 5 Templates for 90% Off](https://themesberg.com/black-friday)
[](https://themesberg.com/black-friday)
# Project files for the [Simple Bootstrap 5 Dashboard tutorial](https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial)
## Getting started
1. Git clone or download the project files
2. Have fun developing!
## Related Links
- [Online Demo](https://themesberg.github.io/simple-bootstrap-5-dashboard/)
- [Tutorial on Themesberg](https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial)
- [Volt - Free Bootstrap 5 Admin Dashboard](https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard)
- Upgrade to Pro - [Volt Pro Premium Bootstrap 5 Admin Dashboard](https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard)
## Other links
- [Bootstrap Themes, Templates and UI kits](https://themesberg.com/templates/bootstrap) from Themesberg
- [Affiliate Program](https://themesberg.com/affiliate?ref=tutorial-gulp-4-bootstrap-sass-browsersync)
### Social Media
Twitter: <https://twitter.com/themesberg>
Facebook: <https://www.facebook.com/themesberg/>
Dribbble: <https://dribbble.com/themesberg>
Instagram: <https://www.instagram.com/themesberg/>
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Simple Admin Dashboard</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 90px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
z-index: 99;
}
@media (max-width: 767.98px) {
.sidebar {
top: 11.5rem;
padding: 0;
}
}
.navbar {
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}
@media (min-width: 767.98px) {
.navbar {
top: 0;
position: sticky;
z-index: 999;
}
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #0d6efd;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light p-3">
<div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
<a class="navbar-brand" href="#">
Simple Dashboard
</a>
<button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="col-12 col-md-4 col-lg-2">
<input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
</div>
<div class="col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0">
<div class="mr-3 mt-1">
<a class="github-button" href="https://github.com/themesberg/simple-bootstrap-5-dashboard" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star /themesberg/simple-bootstrap-5-dashboard">Star</a>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
Hello, John Doe
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Messages</a></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
<span class="ml-2">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
<span class="ml-2">Orders</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
<span class="ml-2">Products</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
<span class="ml-2">Customers</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
<span class="ml-2">Reports</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
<span class="ml-2">Integrations</span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-sm btn-secondary ml-3 mt-2" href="https://themesberg.com/blog/bootstrap/simple-bootstrap-5-dashboard-tutorial">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-book" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 2.828v9.923c.918-.35 2.107-.692 3.287-.81 1.094-.111 2.278-.039 3.213.492V2.687c-.654-.689-1.782-.886-3.112-.752-1.234.124-2.503.523-3.388.893zm7.5-.141v9.746c.935-.53 2.12-.603 3.213-.493 1.18.12 2.37.461 3.287.811V2.828c-.885-.37-2.154-.769-3.388-.893-1.33-.134-2.458.063-3.112.752zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
</svg>
<span class="ml-2">Read tutorial</span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-sm btn-warning ml-3 mt-2" href="https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard">
⚡︎ Volt Dashboard
</a>
</li>
<li class="nav-item">
<a class="btn btn-sm btn-primary ml-3 mt-2" href="https://themesberg.com">
By Themesberg ❤️
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Overview</li>
</ol>
</nav>
<h1 class="h2">Dashboard</h1>
<p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>
<div class="row my-4">
<div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Customers</h5>
<div class="card-body">
<h5 class="card-title">345k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">18.2% increase since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Revenue</h5>
<div class="card-body">
<h5 class="card-title">$2.4k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">4.6% increase since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Purchases</h5>
<div class="card-body">
<h5 class="card-title">43</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-danger">2.6% decrease since last month</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-lg-0 col-lg-3">
<div class="card">
<h5 class="card-header">Traffic</h5>
<div class="card-body">
<h5 class="card-title">64k</h5>
<p class="card-text">Feb 1 - Apr 1, United States</p>
<p class="card-text text-success">2.5% increase since last month</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-xl-8 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Latest transactions</h5>
<div class="card-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Product</th>
<th scope="col">Customer</th>
<th scope="col">Total</th>
<th scope="col">Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17371705</th>
<td>Volt Premium Bootstrap 5 Dashboard</td>
<td>johndoe@gmail.com</td>
<td>€61.11</td>
<td>Aug 31 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
<tr>
<th scope="row">17370540</th>
<td>Pixel Pro Premium Bootstrap UI Kit</td>
<td>jacob.monroe@company.com</td>
<td>$153.11</td>
<td>Aug 28 2020</td>
<td><a href="#" class="btn btn-sm btn-primary">View</a></td>
</tr>
</tbody>
</table>
</div>
<a href="#" class="btn btn-block btn-light">View all</a>
</div>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="card">
<h5 class="card-header">Traffic last 6 months</h5>
<div class="card-body">
<div id="traffic-chart"></div>
</div>
</div>
</div>
</div>
<footer class="pt-5 d-flex justify-content-between">
<span>Copyright © 2019-2020 <a href="https://themesberg.com">Themesberg</a></span>
<ul class="nav m-0">
<li class="nav-item">
<a class="nav-link text-secondary" aria-current="page" href="#">Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Terms and conditions</a>
</li>
<li class="nav-item">
<a class="nav-link text-secondary" href="#">Contact</a>
</li>
</ul>
</footer>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<!-- Github buttons -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script>
new Chartist.Line('#traffic-chart', {
labels: ['January', 'Februrary', 'March', 'April', 'May', 'June'],
series: [
[23000, 25000, 19000, 34000, 56000, 64000]
]
}, {
low: 0,
showArea: true
});
</script>
</body>
</html>
gitextract_a68cb7r1/ ├── LICENSE.md ├── README.md └── index.html
Condensed preview — 3 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (23K chars).
[
{
"path": "LICENSE.md",
"chars": 1094,
"preview": "Copyright 2020 [Themesberg](https://themesberg.com) (Crafty Dwarf LLC)\n\nPermission is hereby granted, free of charge, to"
},
{
"path": "README.md",
"chars": 1537,
"preview": "# [🔥 Black Friday 2022 - Get Bootstrap 5 Templates for 90% Off](https://themesberg.com/black-friday)\n[![Themesberg Black"
},
{
"path": "index.html",
"chars": 18896,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width"
}
]
About this extraction
This page contains the full source code of the themesberg/simple-bootstrap-5-dashboard GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 3 files (21.0 KB), approximately 5.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.