Admin Dashboard Using Bootstrap 5 | Dashboard Template Using Bootstrap 5 | Dark/Light
HTML-код
- Опубликовано: 26 июн 2024
- In this video tutorial, we'll explore the creation of an Admin Dashboard using Bootstrap 5. This Bootstrap 5 Dashboard Template offers both a sleek dark mode and a clean light mode for your web application. You'll learn how to toggle the sidebar, nest dropdown menus, and effortlessly implement the dark and light modes using the power of Bootstrap 5.3.
Create admin dashboard using Bootstrap 5. Follow along step by step, and by the end of this video, you'll have an impressive admin dashboard that's both stylish and user-friendly.
Explore the live demo of this Bootstrap 5 Admin Dashboard project at the following link: codzsword.github.io/bootstrap...
Feel free to check it out and leave your feedback.
Access the source code for the dashboard project by visiting the following link:-
github.com/codzsword/bootstra...
Explore the code and feel free to provide your insights or contributions.
Timestamp
00:00 - Demo
00:57 - Initial Setup with Bootstrap 5
01:28 - Creating the Dashboard Markup
02:54 - Brand and Sidebar Menu
04:01 - Customizing Sidebar Menu Items
07:40 - Sidebar Multilevel Dropdown
08:54 - Designing the Main Header Navbar
10:16 - Main Content
13:16 - Adding Sidebar Toggle Functionality (JavaScript + Bootstrap 5)
14:01 - Creating Tables for the Admin Dashboard
15:43 - Implementing Dark and Light Mode Toggle (Bootstrap)
18:28 - Final Demo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vs Code(Editor)
Plugins(VS Code):
Live Server : Local Server with live reload feature
Lastly, Enjoy Music Too. 😆😆
Music Regard
@BreakingCopyright
Stand Out: Elevate Your Profile with a Unique Personal Portfolio Website.
ruclips.net/video/OgXJpPoM1ZY/видео.html
Hello,
The main purpose of creating these tutorials is to guide users through the step-by-step procedures in the video, rather than simply providing the source code. As creators, we put a lot of effort into making these videos, and while I may not explain every detail of how the codes work together, I believe that with some extra effort, the codes will be understandable to those who follow the tutorial. The intention is to empower viewers to learn by actively engaging with the code and grasping the concepts as they progress through the tutorial.
I have provided a template for the source code in description so that users can build the project from scratch and gain a hands-on understanding of the concepts.
Thank you for your understanding and for being a part of this learning journey with us.
Access the source code for the admin dashboard using bootstrap 5 project by visiting the following link:-
github.com/codzsword/bootstrap-admin-dashboard
Don't forget to hit the like button 🔔 , subscribe for more web development content, and share your thoughts in the comments.
Hola! Muchas gracias por el contenido, lo realicé siguiendo tus pasos y sí funciona, te agradezco de corazón ❤️
Gracias. Realmente me alegra saber que te ayudó. 🔥🔥🔥
wow nice dashboard
Thank you
Thanks. Very helpful in the project that I'm working on.
Though I need to reduce the playback speed to 0.25x to catch up.
Hehe 😜
hello bro firstly thanks for the video.
i want that dashboard content be fixed and a scrolling sidebar when option are more
please reply as soon as possiblr
At the 2:54 timestamp on line 18, instead of using `h-100`, replace it with the Bootstrap classes "vh-100 overflow-auto." This combination ensures that the container occupies the full height of the view port, and scrolling is enabled when the content surpasses the container's height.
Thank you.
i have a problem with the first 2 cards which are the one that says welcome back admin and the one next to it that say $78 total earnings.
the problem is that the 2 cards are in separate rows rather than the same row next to each other. i think i missed up the classes or something so can you give me like a hint or something since i don't fully know the whole bootstrap classes. thanks in advance.
I've made the necessary updates to the index.html file in the GitHub repository as per your request. Please refer to line number 47 for the changes. Feel free to let me know if you need anything else from my end. However, note that I won't be providing the entire source code. 😁😁 If you have any further questions or need clarification, please don't hesitate to ask.
thank you
You're welcome
Thanks a lot for this helpfull tool, one question, how may i leave fixed the line on top, i mean the CodzSword icon and the navbar on the main section if the main section has a lot of info and when scroll it keeps the line on top and also in sidebar leave on top the icon or business logo
Do you intend to set the position of the sidebar and main navbar to be fixed?
@@codzswordyes , if i scroll down on the mail or Sidebar it still keep fixed the top of the screen.
To make the main navbar stick to the top, you need to add the following CSS properties to the Bootstrap navbar class:
position: sticky;
top: 0;
z-index: 11000;
And, for .main you can remove overflow hidden property
However, making the sidebar sticky requires more changes, and my comment alone may not suffice to provide a complete answer for that.
Se for o que to pensando, vai me ajudar pra caraca no meu trabalho da escola
Is there a way to make the side bar a static size? On some viewport sizes it gets huge, others with text in the brand area wraps.
I believe the sidebar width should remain constant across all screens. If necessary, you can use CSS breakpoints and manually set the sidebar width.
Thanks.
Muhcas gracias, existe una forma de dejar fijo el sidebar para que cuando haga scroll se mantenga el nombre de la empresa fijo, lo mismo para la parte del contenido que se mantenga fijo el navbar donde estan las lineas y el avatar?
Tiene la intención de establecer que la posición de la barra lateral y de la barra de navegación principal sea fija?
@@codzswordasí es, es posible esto?
Very helpful video. No need to post the code as lots of people would look for free stuff for your work. It would help if it was a bit slower so we can check what we missed when typing the example to replicate the tutorial. I have an issue where the container is not responsive and i cannot figure out what i missed. the same length is kept no matter the device. viewport was set in header, i dont know what else to check. can you please give some advise on this? thank you
Your outreach is appreciated, and I want to express my gratitude. I couldn't pinpoint where you may have missed the details in your comment. If you could be more specific, it would be helpful.
I think if you just make them go a bit slower it is easier to validate the copying when following the tutorial. in my case i found that there was a media max and media min entry in css after go through the video again and that seemed to fix the problem. Thank you for the help@@codzsword
I just wanted to let you know that I was following your instruction. The Javascript is not working. Even when I was inspecting the elements by clicking on the toggle icon, it was not bringing the class as you were showing right before you added the CSS style for the sidebar collapse. Any help from you would be greatly appreciated. And Thank you so much for putting this up for us.
I wouldn't upload a tutorial video that doesn't work; 🤔🤔 I'm confident it's functional. Nonetheless, I'd be delighted to assist you. If you encounter any difficulties with the sidebar toggle functionality, you can refer to the provided source code in this video: ruclips.net/video/fFwT4vwZXhg/видео.html. Hopefully, it will resolve your issue. If not, kindly leave a detailed comment explaining your specific problem.
Enjoy. চিন্তা করবেন না
@@codzsword Thanks a lot. How can I share my code with you.?
@@codzswordHi! Razi is correct. The JS does not work for the sidebar collapse/extend button. But the problem is not in the JS file. It is in the index.php file.
During the video, you typed this code in the video while you worked through it:
But the sidebar would not expand/collapse. Later on in the video you can see that you made a correction to the 2nd line above (the video doesn't show you type the class in the 2nd line - but you can see that it is changed in the code later on in the video):
That fixed the sidebar expanding/collapsing.
For the dark/light toggle, for some reason, even after refreshing my browser a million times with F5, it was not working. I thought it was a problem with the code - I spent like an hour searching for where I made the mistake. But there were no mistakes. After like an hour of refreshing the browser, it finally worked - I could switch between light and dark mode - but I do not know why that happened.
Great video btw - but if I can make a suggestion - you jump too quickly between windows. Like you would type or paste some code and then in a split-second you jump to next video without pauses. We keep needing to backtrack to see the code introduced.
Thank you
My sidebar is active on smaller screen without even toggling
@@kossy_bml4407
You're correct; the sidebar doesn't collapse by default on mobile devices. However, it would be a great addition to have that feature. I've made updates to the GitHub repository in response to your comment. Please incorporate these changes. Here's the modified code:
===== changes in index.html =====
===== changes in style.css =====
@media (max-width: 767.98px) {
.js-sidebar {
margin-left: -264px;
}
#sidebar.collapsed {
margin-left: 0;
}
}
Simply add the class name "js-sidebar" to the `` element and apply the corresponding CSS rules.
Thanks.
without using display:flex, does the flex-grow:1 will work?
I apologize for the delayed response to your comment. Just to clarify, the flex grow property will not take effect unless the display is set to flex. I have already made this update in the GitHub source code. Thank you for your understanding.
how to change the color?
For sidebar link attributes, remember to target specific classes. In this tutorial, I haven't focused on those classes, but you can easily customize the color and background by making adjustments in the CSS file.
What's the difference between the CDN links Bootstrap@5.3.2 and Bootstrap@5.3.0- alpha2
Cause i am using the v5.3.2 and you're using 5.3.0-alpha-2
Can you send the link of the docs of Bootstrap@5.3.0 - alpha2 please! 0:00 0:00
Feel free to utilize Bootstrap@5.3.2, which stands as the most recent stable release of Bootstrap. Regarding bootstrap@5.3.0-alpha2, it represents an early iteration of Bootstrap 5.3. You can find documentation for bootstrap@5.3.0-alpha2 in the official Bootstrap website's blog.
is it fixed even onscroll
??
Top navigation bar and the main sidebar in the dashboard are not set to a fixed position, they won't stay in place when you scroll.
in small screen sidebar is not collapsed by default
Hello Sabbir, thanks for getting in touch. You're correct; the sidebar doesn't collapse by default on mobile devices. However, it would be a great addition to have that feature. I've made updates to the GitHub repository in response to your comment. Please incorporate these changes. Here's the modified code:
===== changes in index.html =====
===== changes in style.css =====
@media (max-width: 767.98px) {
.js-sidebar {
margin-left: -264px;
}
#sidebar.collapsed {
margin-left: 0;
}
}
Simply add the class name "js-sidebar" to the `` element and apply the corresponding CSS rules.
Thanks. ধন্যবাদ
well, I've fixed that.. but I wanna make sidebar and navbar fixed and only content scrollable. edit: done ✅
@@0xsabbirhave you done that, I’d love to do that too
all done ✅
@@0xsabbir can you share how you archived that?
Can you please do Bootstrap v5.1.3 admin dashboard?
I chose Bootstrap version 5.3 because it has a feature that lets you easily switch between light and dark modes. If you prefer to use version 5.1.3, you can simply include its content delivery network (CDN). However, with this version, you won't have the ability to toggle between light and dark modes.
@@codzsword Thanks 😍
I am using the bootstrap@5.3.2 but you're using bootstrap@5.3.0-alpha2
And i am developing a whole site with bootstrap@5.3.2. Could you please send me the link of bootstrap@5.3.0-alpha2.
Feel free to utilize Bootstrap@5.3.2, which stands as the most recent stable release of Bootstrap. Regarding bootstrap@5.3.0-alpha2, it represents an early iteration of Bootstrap 5.3. You can find documentation for bootstrap@5.3.0-alpha2 in the official Bootstrap website's blog.
please share the source code, thanks!
What's the point of the extensive effort we put into creating this video if I'm sharing the entire source code? Nonetheless, I have provided a template for the source code in description so that users can build the project from scratch and gain a hands-on understanding of the concepts. Thank you for your understanding.
can you share the source code?
Please, read the pinned comment.
===== changes in index.html =====
===== changes in style.css =====
@media (max-width: 767.98px) {
.js-sidebar {
margin-left: -264px;
}
#sidebar.collapsed {
margin-left: 0;
}
}
i already do this and it worked,but why cant i open the sidebar?
It needs to be functional. Have you checked the source code?