D4mations.com

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

[ad_1]
https://i.ytimg.com/vi/a4tbhwMGSPQ/hqdefault.jpg



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

d4mer

,
, , , , , , , , , , ,

35 responses to “Bootstrap 4 Tutorial [#4] Code a Responsive Website (Part 1)”

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

  4. 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. 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 …

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

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

    <form>
    <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>
    <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>
    </div>
    <div class="col-auto">
    <button type="submit" class="btn btn-success btn-lg">okay, go!</button>
    </div>
    </div>
    </form>

  19. 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. 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?

  26. 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. 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. Hello,
    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. 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.

  31. 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…

Leave a Reply