How to Create Sidebar Using Bootstrap 5 | Responsive Sidebar With Bootstrap | Sidebar Menu

Поділитися
Вставка
  • Опубліковано 24 лис 2024

КОМЕНТАРІ • 86

  • @venvilph6799
    @venvilph6799 7 місяців тому +5

    Finally, some youtuber who has a source code. Thanks bro! :)

    • @codzsword
      @codzsword  7 місяців тому +1

      Don't call me a UA-camr. 🥸

  • @freakent
    @freakent 8 місяців тому +7

    Thank you. Your solution is exactly what I was looking for, but I don't think a tutorial delivered in this style works. The music is a massive distraction, and whilst I can see what you are doing, a good tutorial should say why you are doing it that way.

    • @codzsword
      @codzsword  8 місяців тому +1

      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.

  • @codzsword
    @codzsword  9 місяців тому +3

    I kindly encourage you to follow along with this tutorial; not only is it an enjoyable and straightforward coding experience, but it also contributes to the growth of our channel's watch time. Your participation would be greatly appreciated! 🙏🙏

  • @BeatCode74
    @BeatCode74 Місяць тому +1

    Thank you very much. Finally a working solution which is easy to understand and proven with a clean code repo!

    • @codzsword
      @codzsword  Місяць тому

      Truly appreciated.
      If you want a tutorial with voice-over, check it ua-cam.com/video/LjsCyH_5ERs/v-deo.html
      And if you can, consider suiiibscribing.

  • @anomfb
    @anomfb Місяць тому +2

    Thanks for the proyect. I am using your components and it is very nice. Is responsive. And the implementation is very simple for a vertical navbar.

  • @lnzh8410
    @lnzh8410 20 днів тому +1

    un très grand merci pour le tuto, super contenu et facile à comprendre, et le choix de musique est vraiment, je n'ai pas de mots, suberpe ; qui est ce ?? 👍 l'écoute de cette musique a été un moment vraiment agréable, merci encore

    • @codzsword
      @codzsword  17 днів тому

      Merci pour votre retour ! Si vous recherchez un guide détaillé sur la création d'une barre latérale à l'aide de Bootstrap, je suis là pour vous.
      ua-cam.com/video/LjsCyH_5ERs/v-deo.html
      Et n'oubliez pas de liker et de vous abonner !

  • @sajjadabdullah
    @sajjadabdullah 27 днів тому +1

    Love this video. Thank you very much.

    • @codzsword
      @codzsword  27 днів тому

      You are welcome! 😀 Like. Share and Suiiiscribe

  • @b.mm.b351
    @b.mm.b351 5 місяців тому

    Hey! I really appreciated this tutorial and learned a lot of things, thanks.

  • @L.I.ErickGonzalezBarragan
    @L.I.ErickGonzalezBarragan 8 місяців тому +2

    Thanks bro!. I have a question: How can I immobilize the aside while I scroll in the main?

    • @codzsword
      @codzsword  8 місяців тому +1

      immobilize??

    • @L.I.ErickGonzalezBarragan
      @L.I.ErickGonzalezBarragan 8 місяців тому +2

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

    • @futurevids09
      @futurevids09 5 місяців тому

      same problem, how to set aside fixed position while the main scrolling?

    • @prajaktachavan9329
      @prajaktachavan9329 2 місяці тому

      Same question please reply

    • @brunook03
      @brunook03 2 місяці тому

      @@prajaktachavan9329 #sidebar {
      position: fixed;
      height: 100vh;
      }

  • @DheiGxux
    @DheiGxux 3 місяці тому

    Thanks for this implementation!

    • @codzsword
      @codzsword  3 місяці тому

      You're welcome! 🤗

  • @juansifuentes2929
    @juansifuentes2929 4 місяці тому +1

    Muchas gracias, desde Perú.

  • @arisanurfarina338
    @arisanurfarina338 26 днів тому +1

    thank you, u really saved me!

  • @fernandoacunayataco6900
    @fernandoacunayataco6900 Місяць тому

    Thanks very much, I really appreciate your contribution

    • @codzsword
      @codzsword  Місяць тому

      Thanks! I'm glad you found it helpful. 🙏
      Subscribe. Checkout other videos as well. Thank you for your support 😊😊

  • @davoodsoleimani9482
    @davoodsoleimani9482 4 місяці тому +1

    That is what I would want !!

    • @codzsword
      @codzsword  4 місяці тому

      Hey there! Don't forget to check out the other amazing videos on my channel. I've started creating videos with explanations and have even covered some exciting Bootstrap tutorials. Thanks for your support, and see you later!

  • @LeeMin-ho26
    @LeeMin-ho26 7 місяців тому +1

    Thank you so much for the source code.

    • @codzsword
      @codzsword  7 місяців тому

      You are welcome!

  • @gustavesabee2173
    @gustavesabee2173 10 місяців тому +3

    Exellent, thank you men

  • @davoodsoleimani9482
    @davoodsoleimani9482 4 місяці тому +1

    Awesome !!🔥🔥

    • @codzsword
      @codzsword  4 місяці тому

      Thank you, brother. I appreciate it.

  • @BrockLesner-bw3et
    @BrockLesner-bw3et 7 місяців тому +1

    more than perfect video...

    • @codzsword
      @codzsword  7 місяців тому +1

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

  • @shabanelmogy7912
    @shabanelmogy7912 6 місяців тому +1

    great and simple

    • @codzsword
      @codzsword  6 місяців тому +2

      Share and subscribe 😉😀

  • @iqblfrmnsyah
    @iqblfrmnsyah День тому +1

    THANK YOU BROOO

  • @JuanzerZ
    @JuanzerZ 7 місяців тому

    Thank you, how can i make it so it starts expanded?

    • @codzsword
      @codzsword  7 місяців тому

      It's really easy I guess.🧐🧐

  • @prajaktachavan9329
    @prajaktachavan9329 2 місяці тому

    Initially navbar height is less than half and when i select drop drown is is increasing accordingly so where in css have you defined height of side nav i.e. sidebar footer is not at the bottom

    • @codzsword
      @codzsword  2 місяці тому

      Hmm. The sidebar isn't covering the entire screen height by default. This shouldn't be happening. As for the sidebar footer, it should be positioned at the bottom. I haven't defined the sidebar height, but I have given a minimum height of 100vh to the main dashboard section.

    • @cloudytutorial4622
      @cloudytutorial4622 Місяць тому

      i experience the same things, could you help me how to fix it

  • @pritammagdum24
    @pritammagdum24 10 місяців тому +3

    Thanks Bro

  • @codzsword
    @codzsword  5 місяців тому +1

    Hey there, many of you wanted a tutorial with voice and explanation, so here it is.
    ua-cam.com/video/LjsCyH_5ERs/v-deo.html
    Your feedback is always welcome.❤

  • @phenixbd
    @phenixbd 4 місяці тому

    Excellent

  • @ricardomatos9669
    @ricardomatos9669 Місяць тому

    y como pongo para que el contenido del formulario salga a la derecha y no despues del menu. gracias

    • @codzsword
      @codzsword  Місяць тому

      Pido disculpas por la respuesta tardía. Tampoco entendí tu pregunta.

  • @tahasultani
    @tahasultani 8 місяців тому +1

    i want to expand sidebar on mouseover and mouse out

    • @codzsword
      @codzsword  8 місяців тому

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

  • @farahilyasEB_
    @farahilyasEB_ 7 місяців тому

    Heyyy, can you explain how can i achieve a tab behaviour on this sidebar. Where clicking on the li i get the respective content on the right side.

    • @codzsword
      @codzsword  7 місяців тому

      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

  • @TheSk8diego
    @TheSk8diego 3 місяці тому

    How to use the menu in all the pages, or put information in the blank space

    • @codzsword
      @codzsword  3 місяці тому

      To avoid manually adding the sidebar to every page in your project, you can implement the sidebar using a backend language, allowing you to include it dynamically across your dashboard or website. Else, you have to manually add sidebar component across all pages in your project.

    • @TheSk8diego
      @TheSk8diego 3 місяці тому

      ​@@codzsword can you make a tutorial of how to add it dynamically on the backend? And how much it will cost $$?

    • @codzsword
      @codzsword  3 місяці тому

      It would take some time, probably around the next 50 years. Just kidding! 😁😆 I'm really excited about creating tutorial videos on different programming languages.
      Stay tuned and continue to show your support. 🫰

  • @pippuccio76
    @pippuccio76 6 місяців тому +1

    how can i start with sidebar expanded by default ?

    • @codzsword
      @codzsword  6 місяців тому

      It's really easy 😉🧐🧐

  • @techno7761
    @techno7761 15 днів тому

    Where are results of clicking submenus?

    • @codzsword
      @codzsword  14 днів тому

      It's simply a drop-down menu. You can link your page using an a href tag.

  • @zaetaignis3986
    @zaetaignis3986 9 місяців тому +1

    Gracias 👍

  • @thetoicxdude2203
    @thetoicxdude2203 11 місяців тому +2

    Can build a chat website?

    • @codzsword
      @codzsword  11 місяців тому +2

      I appreciate your feedback, and at the moment, my focus is on content that resonates more with our intended audience. Given that the previous portfolio website and web components video tutorial didn't quite hit their target, I want to ensure that our new content has broader appeal and higher search potential.

    • @thetoicxdude2203
      @thetoicxdude2203 11 місяців тому

      ​@@codzsword😮

    • @codzsword
      @codzsword  11 місяців тому

      😥😢

  • @SEO-Content-2024
    @SEO-Content-2024 Місяць тому

    hey bro, would you like to join my agency I have started recently. The payments will be project based. Let me know.

    • @codzsword
      @codzsword  Місяць тому

      Could you please send an email?

  • @vocalcorer
    @vocalcorer 8 місяців тому

    why dropdown doesn't work on every button?

    • @codzsword
      @codzsword  8 місяців тому

      Cause it does not have dropdown link to show.

  • @aguswidi9316
    @aguswidi9316 4 місяці тому +3

    I came here for the music. I swear

    • @codzsword
      @codzsword  4 місяці тому

      This is the best compliment I have received so far. 🤣😂
      And for those who complain about the background music in this video, check this.
      ua-cam.com/video/LjsCyH_5ERs/v-deo.html

  • @ettitaiwo1642
    @ettitaiwo1642 9 місяців тому +1

    thank you so much
    but i just copied the code tho

    • @codzsword
      @codzsword  9 місяців тому

      Copied?? Did you follow the tutorial??

  • @sadiajaved8241
    @sadiajaved8241 6 місяців тому +1

    thanks bro

    • @codzsword
      @codzsword  6 місяців тому

      Subscribed bro? 😉