Bootstrap 5 Sidebar | Sidebar Bootstrap 5 Responsive | Left Vertical Navbar Bootstrap
HTML-код
- Опубликовано: 20 май 2024
- The sidebar component lets users navigate through your website. Mostly sidebars are used in admin and user panels where users must have accessibility to navigating through the webpage with ease.
Creating these sidebar components is really easy with Bootstrap 5. So, in this video, I have implemented a sidebar component that has toggle functionality with a sidebar navigation link.
Here are the important links related to this tutorial:
Bootstrap 5 Sidebar Demo: You can see the live demonstration of the Bootstrap 5 sidebar component at this link - codzsword.github.io/bootstrap...
Bootstrap 5 Sidebar Source Code: The source code for the Bootstrap 5 sidebar component can be found at this GitHub repository - github.com/codzsword/bootstra...
Thank you for watching, and we hope you find this tutorial helpful in creating stylish and functional sidebars for your web applications. Don't forget to hit the like button 🔔 , subscribe for more web development content, and share your thoughts in the comments.
#sidebar #bootstrap
Timestamp
0:00 - Introduction and Demo
0:15 - Initial setup and project preparation
0:58 - Implementing the sidebar toggle functionality and HTML markup
7:59 - Creating a multi-level menu within the sidebar
17:36 - Final demo showcasing the completed Bootstrap 5 sidebar component
The Bootstrap sidebar menu has a huge problem 👎: You are on the first webpage. You click on the hamburger menu icon. The sidebar menu opens. You click on a link and go to the next webpage. Then you click on the back button and go back to the first webpage. Problem: The sidebar menu is still open!
While this may not be an issue on big screens, on a mobile screen visitors see a big sidebar menu that takes the whole screen. They do not see the webpage content. So they click again on the back button and leave the website completely!
Sure, you can hack with JS, but why should you? And what if the BS code changes in the next version??
I don't really see the big problem you're talking about with the sidebar project built using Bootstrap 5. 🫣
Let me break it down: The sidebar is just one component of the dashboard, which is the main parent component. The sidebar remains open initially, with toggle functionality provided for user preferences while using the dashboard.
As for the issue with the sidebar on mobile devices, sure, it might not have been considered in the tutorial, but you don't even need JavaScript for this in a Bootstrap dashboard. One visitor already commented on this [ruclips.net/video/4VN8ZdDse9M/видео.html] , and I provided the solution.
And about changing Bootstrap classes, come on, it's not like it's going to break compatibility with the next version.
If you're still not convinced, check out the HTML CSS sidebar project covered on this channel. 🙏
Hi, it's amazing. Thanks!
Thank you too! 😀
Thank you so much for your source code.
You're most welcome
very useful
Nice work ❤
Nice profile image too. 😄😉
ধন্যবাদ
Amazing. Thanks
Thank you too!
increíble trabajo me sirvió mucho 🤩Gracias
🤩Gracias
Thank you for that!
I will use it for a personal project of mine. IoT Device manager 👌✌
I truly appreciate your kind words! Comments like these bring a smile to my face. Wishing you the best of luck with your project as well!
Благодарим ви за милите думи! 🤜🤛
thanks for this amazing and easy-to-follow content. im a backend developer where i struggle a lot when it comes to designing UI but this video helped so much!
Glad it was helpful!
Wow, Thank you for that!
You're welcome!
thanks for help my guider give me this task and says do your own research on but and i found your video it really helped me 😃
You're welcome 😊
Excelente diseño, me será de mucha ayuda 🤩
Gracias.🥰🥰🥰
Thank you very much. I used this template for my CS50 final project job analysis website.
You're very welcome! I'm glad to hear that you found the template useful for your CS50 final project job analysis website.
thanks a lot!! it really help me in our system project. thanks!
Glad to hear that! 😀😃😀😀😀
this was so good thanks!
You're so welcome!
100500 like!
nice
Thanks
Personal Portfolio Website Using HTML CSS JavaScript
ruclips.net/video/OgXJpPoM1ZY/видео.html
How to open a menu after clicking on sidebar links? I want you to stay on the same page.
The aim is for the sidebar navigation links to open within the same tab when clicked. This is how my code operates as well. All that's required is to insert the URL into the anchor tag.
If you're facing any difficulties, feel free to download the source code for reference.
Source code for advanced developers would be appreciated
I apologize for the delay in addressing your comment. I would like to notify you that I have recently implemented changes to the source code and have also added a live demo link in the description. Please take a moment to review it. I sincerely apologize for not being able to respond to your comment in a timely manner once again.
Hello, Can you provide a source code. I am a beginner and I don't understand some of the codes. I have to repeat a few clip of the video to look for the code which is a bit hassle. I hope you understand. Thank you.
Apologies for the delayed response. I've updated the source code and included a live demo link in the description. Please have a look. Sorry again for the delay in replying to your comment.
@@codzsword Thank you so much for responding. It really helps a lot.
Yo, I'm quite new to Bootstrap. How can I implement the template inside a folder? (I tried putting the code inside it, but the Bootstrap path isn't recognized, I think.)
Certainly! You can easily add Bootstrap to your project by just copying and pasting the Bootstrap Content Delivery Network (CDN) links into your project's `index.html` file. It's a straightforward process.
@codzsword I tried pasting the entire code, even tried moving the file inside a folder, but it still doesn't work as intended...
Also, thanks for responding so quickly, kek.
Please don't worry! You can access this sidebar project by following the link provided in the description. I hope this information is helpful to you.😉😉
voice rakhenge to aur behtar hoga sir
It would have been more beneficial for both you guys and myself if there were audio-explained tutorials available. Considering the current situation, it could be quite time-consuming, and I must admit that I'm not very confident in this regard. 😳Nonetheless, I have attempted to create voice-over videos for PHP tutorials, and I hope you'll take the time to review them. I always appreciate reading your feedback.❤❤
the background music is so annoying. I am leaving
Stay with me, bro! 😭😢😢😭
I understand, no worries! You can mute this video and play your favorite music in another tab. Don't worry, I won't leave! , and I appreciate your concern. By the way, I've provided the source code for the sidebar just for you. Enjoy. চিন্তা করবেন না
@@codzsword Thank you. :)