Bootstrap 5 Sidebar | Sidebar Bootstrap 5 Responsive | Left Vertical Navbar Bootstrap

[@n.n.1279]

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??

[@codzsword]

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 [kzbin.info/www/bejne/aoexaY2aediYb68] , 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. 🙏

[@paulofelipesilvadesouza7287]

It helped me start my own sidebar, thanks!

[@codzsword]

Thank you for your support Please remember to like, share, and subscribe.

[@StevenWong737]

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!

[@codzsword]

Glad it was helpful!

[@mohamadderouich1899]

Thank you very much. I used this template for my CS50 final project job analysis website.

[@codzsword]

You're very welcome! I'm glad to hear that you found the template useful for your CS50 final project job analysis website.

[@LeeMin-ho26]

Thank you so much for your source code.

[@codzsword]

You're most welcome

[@wormerking4909]

Wow, Thank you for that!

[@codzsword]

You're welcome!

[@HELLZEL_J]

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 😃

[@codzsword]

You're welcome 😊

[@francisjayvillas5623]

thanks a lot!! it really help me in our system project. thanks!

[@codzsword]

Glad to hear that! 😀😃😀😀😀

[@robotinike]

Hi, it's amazing. Thanks!

[@codzsword]

Thank you too! 😀

[@nuhanislam2059]

Nice work ❤

[@codzsword]

Nice profile image too. 😄😉 ধন্যবাদ

[@miroframe]

Thanks for the clear instructions. Apparently, if you allow, I will use it in the creation of my website. i also want to ask about the picture you used as background. I like it. Did you create it yourself or did you download it from some photo bank? I would like to buy it. Where can I download it please? Thank you and good luck with your next tutorials.

[@codzsword]

Feel free to use this for your project! I found the background image on Freepik, and it's completely free. Thanks so much for your support, it means a lot! I've also created several videos on sidebars, which you can check out if you're interested. And if you feel like supporting the channel further, you could even consider becoming my first channel member-only if you want to, no pressure. Your support really makes a difference.

[@miroframe]

​@@codzswordthank you for your reply. I want to ask if you have created a tutorial for using DataTables in a project with Bootstrap 5? I'm building my own web application in Bootstrap 5 - an information system with a database connection and I'm trying to learn how to use Datatables in my project. Thank you very much for your reply. Miro

[@Cyecize]

Thank you for that! I will use it for a personal project of mine. IoT Device manager 👌✌

[@codzsword]

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! Благодарим ви за милите думи! 🤜🤛

[@Unicorn-qg8mz]

this was so good thanks!

[@codzsword]

You're so welcome!

[@tamaraochoa376]

increíble trabajo me sirvió mucho 🤩Gracias

[@codzsword]

🤩Gracias

[@angelolobascio6608]

hi, but if you have perfectly created the css for each class and id, what do you need for bootstrap? Sorry for the stupid question but I'm still at the beginning.

[@codzsword]

Certainly, these types of questions are commonly encountered by all, not just beginners. Firstly, I believe Bootstrap may not encompass all the necessary CSS rules within its predefined classes, leading us to target specific classes and apply custom styles accordingly. Secondly, it is often more convenient to incorporate custom styles rather than relying solely on individual Bootstrap classes. Lastly, for this particular project, I have opted for minimal usage of custom styles, primarily focusing on the sidebar toggle functionality and the dropdown icon. Thanks

[@angelolobascio6608]

@@codzsword Thank you for the response... you are a really good artist. Can I ask you one last question? Why, even though I apply all the necessary CSS rules, my small projects have a white background, but my white is duller, more opaque than other modern websites? Is there any particular rule for that? Thank you for any response. Greetings from Italy.

[@alexanderrivas5192]

Excelente diseño, me será de mucha ayuda 🤩

[@codzsword]

Gracias.🥰🥰🥰

[@akanosz2]

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.)

[@codzsword]

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.

[@akanosz2]

@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.

[@codzsword]

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.😉😉

[@codefoxx]

Source code for advanced developers would be appreciated

[@codzsword]

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.

[@MohammadAminiNasab]

very useful

[@TheRagreis]

Amazing. Thanks

[@codzsword]

Thank you too!

[@KaledNader]

How to open a menu after clicking on sidebar links? I want you to stay on the same page.

[@codzsword]

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.

[@Jc-pc6jz]

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.

[@codzsword]

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.

[@Jc-pc6jz]

@@codzsword Thank you so much for responding. It really helps a lot.

[@viviansepti]

nice

[@codzsword]

Thanks

[@jigyasanamdeo]

voice rakhenge to aur behtar hoga sir

[@codzsword]

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.❤❤

[@andreyparovozz]

100500 like!

[@codzsword]

Personal Portfolio Website Using HTML CSS JavaScript kzbin.info/www/bejne/hZi7e6OGpLJkkLs

[@TariqueMahmud313]

the background music is so annoying. I am leaving

[@codzsword]

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. চিন্তা করবেন না

[@TariqueMahmud313]

@@codzsword Thank you. :)