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


https://i.ytimg.com/vi/7jy5d27jmrY/hqdefault.jpg



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

28 thoughts on “Build a website with Bootstrap 4 – Part 1: The setup

  • April 2, 2019 at 15:07
    Permalink

    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.

  • April 2, 2019 at 15:07
    Permalink

    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.

  • April 2, 2019 at 15:07
    Permalink

    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

  • April 2, 2019 at 15:07
    Permalink

    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?

  • April 2, 2019 at 15:07
    Permalink

    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

  • April 2, 2019 at 15:07
    Permalink

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

  • April 2, 2019 at 15:07
    Permalink

    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

  • April 2, 2019 at 15:07
    Permalink

    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

  • April 2, 2019 at 15:07
    Permalink

    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.

  • April 2, 2019 at 15:07
    Permalink

    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.

  • April 2, 2019 at 15:07
    Permalink

    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 Reply