├── README.md
├── index.html
├── screenshot.png
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 |
Responsive Admin Dashboard With Bootstrap 5
2 | Youtube Channel https://www.youtube.com/channel/UC8c4OFeOvNGmUlHLfQb9TVg
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Bootstap 5 Responsive Admin Dashboard
12 |
13 |
14 |
15 |
16 |
17 |
41 |
42 |
43 |
44 |
45 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
720
80 |
Products
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
4920
90 |
Sales
91 |
92 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
3899
101 |
Delivery
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
%25
111 |
Increase
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
Recent Orders
120 |
121 |
122 |
123 |
124 | # |
125 | Product |
126 | Customer |
127 | Price |
128 |
129 |
130 |
131 |
132 | 1 |
133 | Television |
134 | Jonny |
135 | $1200 |
136 |
137 |
138 | 2 |
139 | Laptop |
140 | Kenny |
141 | $750 |
142 |
143 |
144 | 3 |
145 | Cell Phone |
146 | Jenny |
147 | $600 |
148 |
149 |
150 | 4 |
151 | Fridge |
152 | Killy |
153 | $300 |
154 |
155 |
156 | 5 |
157 | Books |
158 | Filly |
159 | $120 |
160 |
161 |
162 | 6 |
163 | Gold |
164 | Bumbo |
165 | $1800 |
166 |
167 |
168 | 7 |
169 | Pen |
170 | Bilbo |
171 | $75 |
172 |
173 |
174 | 8 |
175 | Notebook |
176 | Frodo |
177 | $36 |
178 |
179 |
180 | 9 |
181 | Dress |
182 | Kimo |
183 | $255 |
184 |
185 |
186 | 10 |
187 | Paint |
188 | Zico |
189 | $434 |
190 |
191 |
192 | 11 |
193 | Carpet |
194 | Jeco |
195 | $1236 |
196 |
197 |
198 | 12 |
199 | Food |
200 | Haso |
201 | $422 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
223 |
224 |
225 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mustafaerden/responsive-bootstrap5-admin-dashboard/154f85a33c94639f11cf1b5c95c829e52134f608/screenshot.png
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --main-bg-color: #009d63;
3 | --main-text-color: #009d63;
4 | --second-text-color: #bbbec5;
5 | --second-bg-color: #c1efde;
6 | }
7 |
8 | .primary-text {
9 | color: var(--main-text-color);
10 | }
11 |
12 | .second-text {
13 | color: var(--second-text-color);
14 | }
15 |
16 | .primary-bg {
17 | background-color: var(--main-bg-color);
18 | }
19 |
20 | .secondary-bg {
21 | background-color: var(--second-bg-color);
22 | }
23 |
24 | .rounded-full {
25 | border-radius: 100%;
26 | }
27 |
28 | #wrapper {
29 | overflow-x: hidden;
30 | background-image: linear-gradient(
31 | to right,
32 | #baf3d7,
33 | #c2f5de,
34 | #cbf7e4,
35 | #d4f8ea,
36 | #ddfaef
37 | );
38 | }
39 |
40 | #sidebar-wrapper {
41 | min-height: 100vh;
42 | margin-left: -15rem;
43 | -webkit-transition: margin 0.25s ease-out;
44 | -moz-transition: margin 0.25s ease-out;
45 | -o-transition: margin 0.25s ease-out;
46 | transition: margin 0.25s ease-out;
47 | }
48 |
49 | #sidebar-wrapper .sidebar-heading {
50 | padding: 0.875rem 1.25rem;
51 | font-size: 1.2rem;
52 | }
53 |
54 | #sidebar-wrapper .list-group {
55 | width: 15rem;
56 | }
57 |
58 | #page-content-wrapper {
59 | min-width: 100vw;
60 | }
61 |
62 | #wrapper.toggled #sidebar-wrapper {
63 | margin-left: 0;
64 | }
65 |
66 | #menu-toggle {
67 | cursor: pointer;
68 | }
69 |
70 | .list-group-item {
71 | border: none;
72 | padding: 20px 30px;
73 | }
74 |
75 | .list-group-item.active {
76 | background-color: transparent;
77 | color: var(--main-text-color);
78 | font-weight: bold;
79 | border: none;
80 | }
81 |
82 | @media (min-width: 768px) {
83 | #sidebar-wrapper {
84 | margin-left: 0;
85 | }
86 |
87 | #page-content-wrapper {
88 | min-width: 0;
89 | width: 100%;
90 | }
91 |
92 | #wrapper.toggled #sidebar-wrapper {
93 | margin-left: -15rem;
94 | }
95 | }
96 |
--------------------------------------------------------------------------------