Видео

Thank you! Should be perfect for Brock Lesnar.💪💪

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?

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.

To achieve a tab-like functionality in our web application, it might be necessary to modify the HTML structure. This could involve creating new HTML elements, such as divs or sections, that will serve as the tabs. While this may seem like a daunting task, it is not impossible. Thanks

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.

You're most welcome

Thanks for that!

If you are unable to figure it out, you can refer to the GitHub link provided in the description.

@@codzsword Thank you!

You're welcome

Don't call me a RUclipsr. 🥸

Thank you, I will

Once you navigate to the next page, the sidebar link will be collapsed. The only thing you can do is highlight the current active link using JavaScript.

You are welcome!

It's really easy I guess.🧐🧐

You're welcome 😊

It means a lot to hear that you appreciate my efforts. Thank you so much!

Cause it does not have dropdown link to show.

I understand that you are suggesting to make it more dynamic, but it would take an extremely long time for me to do that. Unfortunately, it's not possible to achieve it in my lifetime.🥲😱 Thank you for sharing your thoughts. Currently, I am working on creating content that can appeal to a wider audience and perform better in search results. Our previous portfolio website and web components video tutorial did not meet our expectations, so I want to concentrate on producing content that is more relevant and engaging for our intended audience. In the meantime, please consider liking, sharing, and subscribing to support this channel.✌️✌️✌️

The analytics regarding these videos provide significant insights. The average view duration is less than 2.10 minutes. I believe if I had included a voiceover, the metrics would have been different. Nonetheless, I'm glad this video reached a wide audience and was well received by many. It's disheartening that most of my other videos, where I've invested significant effort, haven't reached my intended audience. I'm considering doing voiceovers, but it's quite time-consuming as syncing the explanation with the video is challenging. Nonetheless, I appreciate your understanding and support. If you enjoy the video, you can show your support by donating through super chats.

Feel free to do as your wish.

@@codzsword Thanks buddy.

Why are you curious about the font I'm using in my VSCode settings instead of focusing on the code tutorial itself? Hehe 🙃🙃 According to Google, the font I use in VSCode is 'Cascadia Code', followed by Consolas and 'Courier New', all in the monospace category. 'Cascadia Code', Consolas, 'Courier New', monospace😁😁

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

Hehe 😜

Welcome. Please do consider subscribing. 👍

immobilize??

when you scroll the main section, the aside section scroll too

You're welcome!

It needs to be functional. Have you checked the source code?

I've implemented a toggle function that activates only upon clicking. We'll cover hovering functionality in a separate video.

Copied?? Did you follow the tutorial??

Absolutely! My initial plan was to create an admin dashboard with graphical data representation. However, as the project progresses, it's likely to become more intricate, especially considering the incorporation of various JavaScript libraries. Stay tuned for future updates on this exciting project! Thanks

Thank you. I believe you're suggesting incorporating a sidebar link to navigate to another page. In that case, you can utilize an admin dashboard built with HTML and CSS ruclips.net/video/-efFsgnfLXI/видео.html , allowing you to create distinct pages for different links.

Gracias 🙃

Thank you very much!

Certainly, incorporating a typewriter effect in the introduction section would have added a nice touch. I'm considering implementing it in my future portfolio projects. Meanwhile, you can check out one of my previous portfolio projects where I made the intro section hoverable. Here's the link to a video : ruclips.net/video/j-BgkCsz-w4/видео.html

Utilizing media queries is essential for ensuring a responsive website. Given that a grid layout system has been employed, it is necessary to declare distinct layouts for various screen sizes.

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.

I aimed to create a straightforward admin dashboard with minimal features, incorporating essential components like navigation, toggle, card, and table functionalities. The goal was to offer users a user-friendly dashboard that they can easily integrate into their projects. As for sharing tutorials on Udemy, I currently don't have any plans, as I feel explaining my code might be challenging and could end up confusing. However, I encourage you to explore my other projects, particularly my portfolio website, where I dedicated considerable effort. Your feedback on these projects would be greatly appreciated. Don't forget to like, subscribe, and share your reviews in the comments to help my content reach a broader audience. Thank you for your support! 💙💙

@@codzsword i already subscribed your channel because I don't have seen any channel that cover bootstrap 5 and teach how to make good looking admin panel. I wish you could make more bootstrap 5 design video.. like different projects, ecommerce, blog etc using boostrap 5. No one is making bootstrap 5 project tutorial.... All are making raw html css design. Hope you will making bootstrap project. Thanks for replying

Thanks

Gracias 🙃

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.

You're Welcome

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.

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.