D4mations.com

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

[ad_1]
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

d4mer

,
, , , , , , , , , ,

28 responses to “Build a website with Bootstrap 4 – Part 1: The setup”

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

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

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

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

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

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

Leave a Reply