• Sunday , 5 July 2020

Build a website with Bootstrap 4 – Part 1: The setup

Code Canyon

In this video, I install Bootstrap 4 and look at how to set it up properly. While the initial setup isn’t the most exciting thing in the world, setting Bootstrap up properly lets us use it to its full potential!

Just as a quick warning, I built this using Bootstrap 4 alpha. A lot has changed. I may get around to building a new one, one day, but in the meantime, you can find some of the changes here – https://medium.com/@lukaszholeczek/how-to-upgrade-bootstrap-4-alpha-6-to-bootstrap-4-beta-d43b4210f2a3

I use Bower (and explain all the steps you need to do if you want to follow along), and then copy a few SCSS files, which I use to import only the Bootstrap components that I’ll actually be using!

I’m doing all this with Bootstrap v4 alpha 6, so fair warning that if you’re watching this in the future, a few small things may be a bit different along the way, but it shouldn’t be anything major.

If you want to follow along, you can get the PSD and images here: https://www.dropbox.com/s/i3ph72nciw75zxa/the-band-design-and-images.zip?dl=0

Bootstrap v4: https://v4-alpha.getbootstrap.com/

Node: https://nodejs.org/en/
Bower: https://bower.io/
Github Desktop: https://desktop.github.com/

New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell/

Original source

3d Ocean

Related Posts


  1. Delight With Gabby
    April 2, 2019 at 15:07

    For some reason i cannot install boostrap, I got this error ENOGIT git is not installed or not in the PATH

  2. kandysman86
    April 2, 2019 at 15:07

    I recommend going to thr Odin project and completing their installation chapter of their web design course plus the command line course. When you are finished, you will understand this totally, plus have node and git and everything.

  3. José A. Pacheco Ondoño
    April 2, 2019 at 15:07

    Hey Kevin. Short ago I've found out some of your videos here in YouTube and the more I see the more impressed I am. Many thanks for your work. 🙂

  4. Ann Macuha
    April 2, 2019 at 15:07

    When will you make a website using HTML5, CSS3, Bootstrap, and JS Framework? I love watching your tutorials!

  5. Pieter-Jan Casteels
    April 2, 2019 at 15:07

    Amazing, tnx for sharing this with us. I did need to search a bit as some things have changed apparently but stil a great learning experience!

  6. 막말자객
    April 2, 2019 at 15:07

    Hello Mr.Kevin! At first thank you for wonderful lecture.
    I have a question. You made this lecture last year and bootstrap version was 4.0.0-alpha. But today's version is 4.1.3. Mr. Kevin, can I install newest version of bootstrap? I will postpone to install until you answer my question. 🙂

    Thank you very much.

  7. Ronin
    April 2, 2019 at 15:07

    What is in the main.css file. Mine setup is not working. It is vrs-4.1

  8. jagpal singh
    April 2, 2019 at 15:07

    plz update sass tutorial i am wait here….thanks a tone…

  9. Bekir Shala
    April 2, 2019 at 15:07

    Amazing video for professional workflow … You just have 1 more subscriber 🙂

  10. Mike, TheAnimated
    April 2, 2019 at 15:07

    I develop on Visual Studio; is this all required or can I just install it using NuGet?

  11. Adam
    April 2, 2019 at 15:07

    I followed exactly then got this plus a tonne of other errors..
    ~$ npm install -g bower
    npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

  12. Downthehollow
    April 2, 2019 at 15:07

    I don't know how often you look at your comments but I don't have a _custom.scss file in my bootstrap nowadays. Can I just make a file named that? Or does it work differently now?

  13. prayer Request
    April 2, 2019 at 15:07

    Hello! I want to learn Bootstrap, may i ask you to be mentor on my way to become an expert of bootstrap.

  14. julien Sibille
    April 2, 2019 at 15:07

    Bootstrap does no longer support Bower

  15. King Kas
    April 2, 2019 at 15:07

    i have been trying to follow you on the setup but always get problem saying the command not found i am not able to install bower pls help

  16. Роман Голендухин
    April 2, 2019 at 15:07

    Hi, what program do you code the video?

  17. King Kas
    April 2, 2019 at 15:07

    i am you new subscriber i will keep following you bro i like the way u explain straight farward

  18. DiogenTheCinic
    April 2, 2019 at 15:07


  19. King Kas
    April 2, 2019 at 15:07

    great video thanks

  20. RJ Rider
    April 2, 2019 at 15:07

    Install of bower says bower is deprecated and can cause project to fail because its dependencies can change, and to use yarn instead??

  21. Abdur Rohim
    April 2, 2019 at 15:07

    I am beginer n use win7 32 bit. Any sugest?

  22. habib ahmed
    April 2, 2019 at 15:07

    S C:Usershabib> npm install -g bower
    npm WARN deprecated bower@1.8.2: …psst! Your project can stop working at any moment because its dependencies can change. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
    C:UsershabibAppDataRoamingnpmbower -> C:UsershabibAppDataRoamingnpmnode_modulesbowerbinbower
    + bower@1.8.2
    added 1 package in 16.925s sir can you help me for this y bower added only one package please kevin help

  23. S.R.Y Venkatesh
    April 2, 2019 at 15:07

    I have a problem with installing bower
    it displays warning
    npm WARN deprecated bower@1.8.2: …psst! Your project can stop working at any moment because its dependencie
    e. Prevent this by migrating to Yarn: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
    what to do now?
    please ans me.

  24. cmonae229
    April 2, 2019 at 15:07

    Hey, kevin! I am installing and going through set up, and I just wanted to see if you know any reason git shell would not show up once git hub is installed. Also w/ bootstrap 4 there is no longer a code line for bower on the bootstrap 4 download site, so any recommendations on what should do next

  25. charlemar charlemar
    April 2, 2019 at 15:07

    Is it "..awe****" . I need to hear NOTHING from anyone so unimaginative than a person using this word. It has been used now by the idiots for over 25 damn years. It shows what a follower you are, not inventive, nothing, just a another follower and therefore I turned your video off immediately when you said it, less than 20 seconds in. Too bad you are such a derivative type person, as you probably had something to say but "awe****" negates anything you have to say. Oh, and be sure, the idiots that will read this, be sure as a way of showing just how clever you are to comment by also using the word. That really is just so clever.

  26. Apporva arya
    April 2, 2019 at 15:07

    hey kevin! instead of installing these all, cant we just use CDN reference?

  27. UntouchedDruid4
    April 2, 2019 at 15:07

    So what’s the diff between setting bootstrap up and just using the css and Js links that they provide? Why use preprocessors or whatever instead of just css and what is scss exactly? Sorry a lot of noob questions.

  28. Mikael Arguelo
    April 2, 2019 at 15:07

    Hey Kevin, Bootstrap 4 alpha 6 don't come with "_custom.scss" in their scss folder anymore. Should I overwrite their "_variables.scss" instead?

Leave A Comment

You must be logged in to post a comment.