Bootstrap Responsive Layout Tutorial

[ad_1]
In this lesson we learn how the Bootstrap column grid system makes creating responsive layouts incredibly simple. We also create a responsive navigation menu! Check out my “Get a Developer Job” course:

Demo files:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

34 responses to “Bootstrap Responsive Layout Tutorial”

  1. Tintinator Avatar

    Regarding the collapsing navbar-toggle at 14:58, I have this issue where the button appears, but the nav links don't drop down after clicking it. Could anyone give some insight on this?

  2. TG8 Avatar

    You are awesome!!!!

  3. ►HowTo◄ PC&GAMING tutorials Avatar

    nice tut man thank you 2017 still usefull helped me alot

  4. Rob Honey Avatar

    Awesome Job – Thank your sir!

  5. Tharindu Perera Avatar

    best tutorial for bootstrap grid layout..

    Thank you!!

  6. Asif Ali Avatar

    Thx for free best videos on YouTube.

  7. Asif Ali Avatar

    Your video is a perfect example of how all tutorial videos SHOULD be made. At absolutely no point did I even consider skipping content, and I only skipped backward once, which usually is better than waiting. So many tutorial videos start out with annoying intros, but yours starts with a finished example, so people know what the goal is. Then you start totally from scratch, and explain in the most efficient way possible. You don't bounce the mouse around, or do any of the other annoying things that I see in so many tutorials. You make use of hotkeys in just the right way, where no one is likely to think "wait, what did he just do, and how did he do it?", but not tapping their fingers thinking "I really don't like waiting for this.".
    Although I used to manually code websites in the 1990s, when CSS had just became a "standard" (Microsoft's defiance of the standard they agreed to is why I'm not still building websites), I'm hiring a developer to build my site, that I plan on editing once it's complete. Your tutorial quickly showed me just how simple HTML5 can be, and exactly how the Responsive Layout code works. THANK YOU!
    I've had this YouTube account for a few years, and have watched thousands videos and over a hundred tutorials, but your's is only the second YouTube page that I've ever subscribed to, despite the constant verbal begging of most other video producers.
    Please do the world a favor, and create a video on how to (and not to) create a tutorial that people can learn and enjoy. If you do, I'll post a link to it in the comments of just about every other tutorial video I watch.

  8. Karry Liu Avatar

    awesome tutorial!

  9. Richard Hageman Avatar

    Your video is a perfect example of how all tutorial videos SHOULD be made. At absolutely no point did I even consider skipping content, and I only skipped backward once, which usually is better than waiting. So many tutorial videos start out with annoying intros, but yours starts with a finished example, so people know what the goal is. Then you start totally from scratch, and explain in the most efficient way possible. You don't bounce the mouse around, or do any of the other annoying things that I see in so many tutorials. You make use of hotkeys in just the right way, where no one is likely to think "wait, what did he just do, and how did he do it?", but not tapping their fingers thinking "I really don't like waiting for this.".
    Although I used to manually code websites in the 1990s, when CSS had just became a "standard" (Microsoft's defiance of the standard they agreed to is why I'm not still building websites), I'm hiring a developer to build my site, that I plan on editing once it's complete. Your tutorial quickly showed me just how simple HTML5 can be, and exactly how the Responsive Layout code works. THANK YOU!
    I've had this YouTube account for a few years, and have watched thousands videos and over a hundred tutorials, but your's is only the second YouTube page that I've ever subscribed to, despite the constant verbal begging of most other video producers.
    Please do the world a favor, and create a video on how to (and not to) create a tutorial that people can learn and enjoy. If you do, I'll post a link to it in the comments of just about every other tutorial video I watch.

  10. MusicAddiction Avatar

    Your tutorial is alright, but please… these "comment" tags are so unnecessary, they make it look like a battlefield.

  11. Alex Bradley Avatar

    Best recorded, edited and delivered tutorial on this subject on the web! Thank you very much! Subscribed!

  12. Ted Zhao Avatar

    Nice and concise, I subscribed.

  13. NickolaiisHD Avatar

    Really good tutorial man, might be a bit fast for beginners but I found it incredibly helpful

  14. Badman Mike Avatar

    Thanks bro, this helped me out a ton.

  15. nurul nazirah Avatar

    Thanks for awesome video. I just want to ask, you use <div class="container">. But you didn't show that u write in css. If using bootstrap, it don't need to write in CSS?

  16. Lyndon Patton Avatar

    Thank you! Very useful.

  17. Bhavin Patel Avatar

    Nice…You just typed div and there was closing div comments…How did you do that.

  18. Actross Yorris Avatar

    great one, i love this thanx

  19. End test Avatar

    great! what text editor did you use?

  20. Colonel Baby Avatar

    Really good, but would love it if you could include a place on where to learn all of the class types.

  21. huor peourn Avatar

    Great tutorial! Now I am able to do it! Thanks!

  22. Sreng Gueckly Avatar

    When I clicked on the button, it didn't show the link, why?

  23. Faris Khan Avatar

    I've got no idea the hell is bootstrap but after watching your tutorial i'm now able to design responsive layouts, thank you great job.

  24. Debarati Dutta Avatar

    a full pacckage of boostrap 🙂

  25. Luis Willnat Avatar

    Watch out ! No more panels with Bootstrap 4 but cards !

  26. Next Beat Avatar

    You're good at giving tutorials. Take notes, other tutorial makes out there!

  27. Michelle Bishop Turkington Avatar

    <div class="navbar navbar-default" role="navigation"> when I added this, it broke my links. any advice?

  28. Michelle Bishop Turkington Avatar

    That was great! Thanks so much!

  29. Dustin Travis Avatar

    You explain things very well, thank you!

  30. Michael Batoon Avatar

    dude! my button wont collapse and display the lists. why? 🙁

  31. Parth Jeet Avatar

    Which text editor are you using ?

  32. pradeep kumar Avatar

    Is it working in asp.net web application

  33. Md. Rokib Uddin Avatar

    i'm really amazed to see this video it's give me every single details and i'm eagerly waiting for that's kind of videos.Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *