• Saturday , 18 November 2017

Bootstrap Responsive Layout Tutorial

Code Canyon
https://i.ytimg.com/vi/Ct7APU7t-ts/hqdefault.jpg



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: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF

Demo files:

Bootstrap Responsive Layout Tutorial

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

Follow LearnWebCode on Twitter for resources and updates:


Original source

3d Ocean

Related Posts

32 Comments

  1. Tintinator
    August 10, 2017 at 20:32

    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
    August 10, 2017 at 20:32

    You are awesome!!!!

  3. ►HowTo◄ PC&GAMING tutorials
    August 10, 2017 at 20:32

    nice tut man thank you 2017 still usefull helped me alot

  4. Rob Honey
    August 10, 2017 at 20:32

    Awesome Job – Thank your sir!

  5. Tharindu Perera
    August 10, 2017 at 20:32

    best tutorial for bootstrap grid layout..

    Thank you!!

  6. Asif Ali
    August 10, 2017 at 20:32

    Thx for free best videos on YouTube.

  7. Asif Ali
    August 10, 2017 at 20:32

    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
    August 10, 2017 at 20:32

    awesome tutorial!

  9. Richard Hageman
    August 10, 2017 at 20:32

    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
    August 10, 2017 at 20:32

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

  11. Alex Bradley
    August 10, 2017 at 20:32

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

  12. Ted Zhao
    August 10, 2017 at 20:32

    Nice and concise, I subscribed.

  13. NickolaiisHD
    August 10, 2017 at 20:32

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

  14. Badman Mike
    August 10, 2017 at 20:32

    Thanks bro, this helped me out a ton.

  15. ashutosh pandey
    August 10, 2017 at 20:32

    great !!!!!!!!!!!

  16. nurul nazirah
    August 10, 2017 at 20:32

    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?

  17. Lyndon Patton
    August 10, 2017 at 20:32

    Thank you! Very useful.

  18. Bhavin Patel
    August 10, 2017 at 20:32

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

  19. Actross Yorris
    August 10, 2017 at 20:32

    great one, i love this thanx

  20. End test
    August 10, 2017 at 20:32

    great! what text editor did you use?

  21. Colonel Baby
    August 10, 2017 at 20:32

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

  22. huor peourn
    August 10, 2017 at 20:32

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

  23. Sreng Gueckly
    August 10, 2017 at 20:32

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

  24. Faris Khan
    August 10, 2017 at 20:32

    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.

  25. Debarati Dutta
    August 10, 2017 at 20:32

    a full pacckage of boostrap 🙂

  26. Luis Willnat
    August 10, 2017 at 20:32

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

  27. Next Beat
    August 10, 2017 at 20:32

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

  28. Michelle Bishop Turkington
    August 10, 2017 at 20:32

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

  29. Michelle Bishop Turkington
    August 10, 2017 at 20:32

    That was great! Thanks so much!

  30. Dustin Travis
    August 10, 2017 at 20:32

    You explain things very well, thank you!

  31. Michael Batoon
    August 10, 2017 at 20:32

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

  32. Parth Jeet
    August 10, 2017 at 20:32

    Which text editor are you using ?

Leave A Comment

You must be logged in to post a comment.