• Tuesday , 14 July 2020

Bootstrap 4 Tutorial [#4] Code a Responsive Website (Part 1)

Code Canyon

In this free tutorial video, we will begin coding a responsive Bootstrap 4 website.

Download the final course files for free here: http://www.bradhussey.ca/bootstrap4-coursefiles

Get this course free at CodeCollege.ca: http://codecollege.ca/courses/bootstrap-4-quickstart/

Share the love, spread the word:

1) Subscribe to my channel
2) Share on Facebook & Twitter
3) Send this free course to a friend

Original source

3d Ocean

Related Posts


  1. Anna Stoermer
    March 26, 2020 at 17:57

    Hey Brad, thanks for having the patience to wait until I made up my mind and apologize for being such a b** in your Freelancing Freedom program. I am very sorry, Brad. I was really under pressure, not only because of my debts also about struggling in my personal life, which I won't discuss here. Anyway, I also saw your Bootstrap 4 alpha tutorial some years ago and tried to follow along, but SASS and flexbox produce too much redundant, cluttered code. I think your Udemy tutorial "From Bootstrap to WordPress" (B2W) is the best tutorial I've seen so far online. I've just been wondering if you and I are the only two people in the World who can develop and code logical, clean, maintainable plain vanilla CSS? There is some room for improvement, though. I will try to begin arranging my CSS commands inside a command block more structured so that the parser or whatever program translates CSS into machine code or assembler workes faster. Because we all know: "Time is money" just like "Performance is money". All the best, Anna Störmer PS: Maybe I will show you in an upcoming tutorial of mine, how to pronounce "Helvetica Neue" in German correctly.

  2. wizardofthedecade
    March 26, 2020 at 17:57

    Hey Brad, really like the tutorial! I just have one question. How did you clean up the code at 12:14?

  3. Sam Fredrickson
    March 26, 2020 at 17:57

    For fuck's sake, the text with inputs are not in the center of my web-page. I've done everything you told the same

  4. masterpiecemafia
    March 26, 2020 at 17:57

    Amazing tutorial but Bootstrap changed a little bit. To have a centered text and form as Brad has, under container div instead class=col-sm-offset1 put class=offset-sm-1 and add this class also to form after form-inline class. Solution – See your code and change the lines to: 1. <div class="col-sm-10 offset-sm-1"> 2. <form action="" class="form-inline offset-sm-1">

  5. Ad Rienks
    March 26, 2020 at 17:57

    It is kind of annoying that bootstrap keeps changing versions. But at least there is a stable v4.0.0 now (spring 2018). Quite some class names have changed though; others have completely gone from the face of the earth!
    For instance: bg-inverse -> use bg-dark instead; and btn-outline-… is the sequence now.
    The navbar-expand-.. class has to be added to the nav element also! There are a lot more changes since the alpha- and beta-versions, I'm sure, so we should stay on the lookout …

  6. vhietor okere
    March 26, 2020 at 17:57

    you clearly stated for beginners, but you just started without explaining those boostrap containers and stuff

  7. Al-Amin Siddique
    March 26, 2020 at 17:57

    i am learning happy for you!!!!!!!!!!!!
    Thank's lot

  8. jofel palomar
    March 26, 2020 at 17:57

    cannot detect background

  9. L
    March 26, 2020 at 17:57

    Mind you, if we use the bootstrap files from your project, which are the alpha version ones, the navbar wont work as expected, I suggest to start with the template provided by bootstrap 4 and go from there,

  10. Darrin Holtz
    March 26, 2020 at 17:57

    Guys, Not to take anything away from Brad, he is an excellent teacher. Bootstrap4 changed so much since this video was made. As of right now they are on alpha 6 and it is way different then alpha 2 which Brad is showing us here. It's kind of annoying I know because I wanted to do this course but whats the sense if they are just going to keep changing it? I will continue to use bootstrap 3.3.7 till they finalize bootstrap 4 and stop making changes to it.

  11. Rahaman Habib
    March 26, 2020 at 17:57

    my align items are not centered
    what should i do?

  12. habib ahmed
    March 26, 2020 at 17:57

    sir i try all video but bower not installing globlely

  13. Mohamed Ezzat
    March 26, 2020 at 17:57

    why do we add the jquery script first then javascript?

  14. habib ahmed
    March 26, 2020 at 17:57

    Hello Sir i don't know how to download node.js npm git bower please sir make some video for so that we can learn more please sir

  15. Gianluca Villalba
    March 26, 2020 at 17:57

    The form doesn't work properly with Bootstrap v4.0.0-beta.2.
    This one works for me:

    <div class="form-row align-items-center d-flex justify-content-center">
    <div class="col-sm-4">
    <label class="sr-only" for="inlineFormInputName">Name</label>
    <input type="text" class="form-control form-control-lg mb-2 mb-sm-0" id="inlineFormInputName" placeholder="Jane Doe">
    <div class="col-sm-4">
    <label class="sr-only" for="inlineFormInputGroupUsername">Email</label>
    <div class="input-group mb-2 mb-sm-0">
    <input type="text" class="form-control form-control-lg" id="inlineFormInputGroupUsername" placeholder="jane.doe@example.com">
    <div class="col-auto">
    <button type="submit" class="btn btn-success btn-lg">okay, go!</button>

  16. Mario Rossi
    March 26, 2020 at 17:57

    hey cant figure out why there is not a gap between my buttons any help ?

  17. javad sameei
    March 26, 2020 at 17:57

    In BS4 alpha 6 you need to change "navbar-dark" to "navbar-inverse" for dark navbar

  18. James Barratt
    March 26, 2020 at 17:57

    Took a few other lessons in from other people and still I prefer yours. Baby steps. Ha ha ha ha

  19. James Barratt
    March 26, 2020 at 17:57

    How clear are you…..? Wow I really want to watch more of your videos now. Hey just subscribe too. Listen could you tell me something. I finished my first site in bootstrap 3 and then copied the nav bar code and dropped it into the right html basic layout for bootstrap 4. Yep found it wouldn’t work at all. OK so I deleted it and was basically trying to understand the bootstrap 4 navbar page and it meant nothing. So I copied their demo code for a navbar as you did in your video but it never worked at all. Strange. So you’d said something about installing the files…? What files…?
    I’d thought the html starter bootstrap page with cdn to get the file bootstrap css was enough. Am I missing files..?

  20. Radu Grecu
    March 26, 2020 at 17:57

    Guys, I just can not align the three boxes ( name, email, button ), in the middle of the row, they just stay like at min. 13:38 (but I finished the tutorial, everything is fine, but the boxes aren't aligned). Help?

  21. Neeraj Swarnkar
    March 26, 2020 at 17:57

    can i get the background music,which you are using in each video?

  22. Heather Lynn
    March 26, 2020 at 17:57


  23. N M
    March 26, 2020 at 17:57

    What is the difference between cover and hero?

  24. DigitalizedElements
    March 26, 2020 at 17:57

    Why do you call a hashtag a pound sign…

  25. Abisoye Bello
    March 26, 2020 at 17:57

    what's the #222 for and using it makes the image disappear at my end here.

  26. MrTritio2
    March 26, 2020 at 17:57

    Hi, thanks for this amazing tutorial. I have a problem when I watch the page in a mobile, part of the text: "welcome to…" dissapear by the top. Do this also happen to someone else?

  27. Ali
    March 26, 2020 at 17:57

    hi, i learned about the bootstrap 4 from your video, i also like your brackets template, can you tell me what is name of template that you using so i can download that template on my brackets. thanks.

  28. Aurora Ruggieri
    March 26, 2020 at 17:57

    I can not download the files, when I go to the page link tells me:

    Access denied. Your IP address is blacklisted. If you feel this is in error please contact your hosting provider abuse department. Did anyone have the same problem?

  29. nate inkster
    March 26, 2020 at 17:57

    So, I guess due to age of this tutorial (2015) that the current css and js dist files (2017) are no longer compatible. I had to replace the latest dist files that were downloaded with Brad's course files in order for the site to preview correctly. I can see constant updates to bootstrap will make this on ongoing issue.

  30. DLiberator78
    March 26, 2020 at 17:57

    This was an awesome tutorial. Thanks for uploading, you have a great teaching style.

  31. Jon Samuda
    March 26, 2020 at 17:57

    Just a suggestion: You might want to strip out your ._.DS_Store file and Mac dir before you upload. maybe use git with a gitignore as option to clone when uploading to share the course files…

  32. Guilherme Almeida dos Santos
    March 26, 2020 at 17:57

    Which is the combination that did you use to indent the txt on around 12:18 of the video?

  33. Esteban Cajina
    March 26, 2020 at 17:57

    Thx master 🙂 one question. why dont use jquery´s bootstrap (dependency) component? Is bad way?

  34. Simphiwe Tebe
    March 26, 2020 at 17:57

    So clear, straight forward and no BS! Subbed!!

  35. Igor Luzhnyi
    March 26, 2020 at 17:57

    I've looked through comments, but my form still shifts to the left. How can I center it? Thank you

Leave A Comment

You must be logged in to post a comment.