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

Key Takeaways

in this video I'm looking at how to set up bootstrap 4 so you can use it in your next project so stick around my name is Kevin and here at my channel we learn how to make the web and how to make it look good while we're at it this has to be one of the most requested no not one of the it is the most requested subject I've had which is making a website with bootstrap and we are going to be using the bootstrap for Alpha so there are a few things with this that will probably be changing in the near future but the overall workflow I think should be staying pretty much the same bootstraps a really awesome tool and it's important that we use it properly and the setup is the thing that we need to get right to be able to use it properly going to be using SAS in this video and in this series uh and only importing the things that we need to really be using in our project uh and just how to you know there's a whole bunch of different ways we can actually get bootstrap onto our thing it's not just necessarily the download button so we'll be exploring how to use MPN and a bit of hour to get that set up in this video so to get started with our bootstrap project what we need need to do is actually download bootstrap and there's like a million ways to do this so I'm going to show you a couple of different ones and give you my opinion on them and they're just my opinions um when you go to download and I'm I am on the version 4 so just to if I go to their normal site get bootstrap.css coming so if you go it's is V4 ala. getet bootstrap.css somewhat close to release so this might be a little bit different when you get there there's a bunch of fixes coming to the beta um so if I click here on download bootstrap it gives us all of the different options we can use to download it so the first one is the one you should not do uh don't download this one it's a giant file for nothing there's no real reason to get their CSS and JavaScript if you're just going to be using this and you want to overwrite it with your own CSS you might as well link to the CDN at least that way if other people you know some some's gone to your site and they've been to another person's site and they both use the CDN it could be catched in their system and it will speed things up a little bit um so I don't really see the point in doing that unless you only want to use something like the grid because if you download this you can get access to their grid only and if all you're going to be using is the grid then that's fine obviously um you can also just down click here and download all the source files so there's nothing wrong with doing that that's going to give you their uh their SAS and everything as it mentions it needs a SAS compiler you'll also need an auto prefixer and some setup and stuff um their setup in the system they use uses grunt so it's all set up to use grunt you just have to make sure noes installed um you get install grunt um and then when you in do an install it's going to run and do a whole bunch of stuff automatically the only thing with this is if you don't have jaal set up on your computer you will run into some issues with it so you need jaal and to set up jaal and a PC is a pain in the butt I've done it on mine but it's you know it's not impossible it just takes a little bit of extra time uh and grunt when it's compiling your CSS is pretty slow it felt like for Ever every time I was using uh grunt to compile it so I don't use this I'm going to be using prepro like I have in all my other videos uh while I'm doing this but that's you know if you want to go that route and use their setup there's nothing wrong with that that's their setup you know you're going to be getting um if they're doing it that way there's some good stuff to it um or you can use a whole bunch of different package managers there's npm ruby gems composer Bower nougat all of these are using the command line and I want to show you guys how to use the command line I'm not the most comfortable person in the command line but I do see the value in it and there's a few things that I do know how to get my way around so I thought it'd be fun to look at them the first thing that's really important for these is um to go and download nodejs so you just go to nodejs.org just do a search in Google for nodejs and click on this one and download it uh when you do that it's just a nice simple installer so it's just going to give you a little installer like that uh that you can in you click on it where do you want to install it click next it's nice little walk through and what that does is it inod inodes it installs nodejs as well as npm which is the node package manager and that's going to be required for Bower which we're going to use the other thing that's required for Bower is uh git so where is it it says somewhere in here there we go uh um B requires node npm so we're covering both those bases when you download this and it requires git to make sure git is installed on your computer just go to desktop. github.com and download their desktop application download for Windows I'm on a Windows can download it on your Mac that's going to install everything you need on your computer as well same thing just tell it where you want to install it click next and you're fine and with that done you can go and install Bower and that's super easy to do and you might be going why can I do why am I doing all these steps when I can just come here and click download Source it's a good question um the advantage with this is if you can get comfortable with using the command line is every time you want to start a new bootstrap project you won't have to go to the bootstrap website and then go to there and then click download source and then find your file in the download folder and unzip it and then drag it over to the other folder it does take a little bit of setup the first time but once you get used to it you'll be able to work a little bit faster and it's an entry into the world of the command line if you're not used to it where a lot of the things I'm using pre-pro for you can do auto prefixing automatically you can um they have some Flex box fixes that they're running through in their package as well uh if you're using other cool things you can do that uh you can have the auto refresh there's a whole ton of really cool stuff that you can have set up um through that so to do that I'm going to move my screen a little bit here I don't usually show my search bar but down here in my search bar I'm going to look for get shell um this is really similar to the command prompt so you might be used to the command prompt and if you're on a Mac just open up terminal it's you'll be fine um you might also have heard of Powershell power shell maybe maybe not um the git shell pretty much is Powers shell but with Git running in it from what I understand um so I'm going to open up the git shell and move this back to where I want to record um and as you can see it looks just like any old uh it just looks like a command prompt or whatever you you know don't know if you're used to seeing this stuff if I used to use a Dos computer so I'm kind of used to it um so I'm currently in my GitHub documents folder and that doesn't really matter right off the bat let's go check out Bower and it says to install it you just have to type this now anytime you're looking at anything for these things whether you're on a Mac or PC just ignore the dollar sign here the dollar sign is just letting you know it's talking about a command prompt only worried about this stuff here so uh let's jump in and I'll explain a little bit what we're doing so we're doing npn mpm which is node package manager and we got that when we installed node.js so we're telling node package manager that we want to install uh bow and then we're doing a SLG and what this is whoops Global that's the same as writing SL Global we want to install it on our entire system we're not taking one folder I don't want to install bow in this folder I want to install it globally on my system and it's just easier if you just type SLG so it saves some strokes and so I want to do a global install of bower and I'll hit return and I wait while it does this and it doesn't take very long to do so for whatever reason mine hung for a little while so if it takes a while just let it go um the first time I'd installed it it went really well for this video I uninstalled it and then reinstalled it when for for demo purposes and it just hung there for quite a while I was about to cancel out but then it just clicked through so if it's taking a bit of time give it that time uh now the next thing I want to do is I want to get into the folder that I want to be working in so if you don't know anything about this um if you do CD you can that's change directory so I can change directory and go where I need to be getting to um but sometimes it's a pain in the butt when you're not you know if you're doing small changes sure but when you want to get into something bigger uh it can be a little bit harder but there's actually two ways you can go about it uh I do a CD and I can go and find my folder so my folder is on my desktop right here just move it down so we can see it I can open up that folder and I can right click and choose copy address and so I can do CD do all that and then paste that in there and it's going to work fine uh but that's kind of long you know that took me a while to do so another thing that I can do and I think this is really cool and you can do this on Max as well I believe um is do your CD and then just drag the folder right there I don't even think you have to drag it there just drag it into here it's going to put that put enter and you can see now I'm on my desktop and I'm in the Band and now that I'm there I can go ahead and install bootstrap so if I click over to here we can go ahead and look and it's really easy to do the only reason I had to come here is um if you're using version three or once version four is live you'll just be able to do a bow install and put in bootstrap if I did that now it would install version three but because I want to be using version 4 I do need to put in the version that I want to be using and all of that until version 4 goes live I'm going to hit enter and this is going to take a while it's not too long but it's going and it's finding all of the different things that it needs and there you go it's done it's so it didn't even take very long so you can see once you set this up so that you know it takes a while to have all of this set up but once it is set up all you need to do is open up your poers shell or your G shell or whatever you're going to be using the letter CD drag your folder in there so you know you're in the right place and then you just have to do a bow install bootstrap hit return and bootstraps installed so it doesn't involve you having to go and click through and do a whole bunch of weird stuff to try and get where you're going uh downloading files on zipping stuff it's super easy and fast and all of that so it's definitely worth getting used to using the command line um I I really think it's worth it and just to show you what that gave gave us is I already had these images I already got all my images ready um but here in the bow components if I jump into there you can see there's the bootstrap so all of my bootstrap stuff is in here there are some things in here I'm not going to be using just because um it's using it set up for their grun system and all of that it is giving me you can see their grun file right there um but it is giving me the files I need in there it's also giving me jQuery and tether which is something that's required for bootstrap now it's one of the things they've added to bootstrap 4 uh for a couple of their JavaScript functionality things um so it gives us everything we need to be able to use it pretty much now to get that to work as I mentioned I do use prepros this is really similar if you're using a program like codekit and if you're on Mac you're probably using codit prepros is both Mac and PC um it's not very expensive there's also whoops yes allow access please um there's also other programs out there that are free prepro does cost money so does codekit they're not too expensive um I think koala maybe is the one that's free I don't have any experience with it though so I don't know about setting it up exactly so what I'm going to do is I want to add that project into prepros here so I can just click and drag that or I could have just pushed this plus button and found it you'll notice that the bow components isn't being watched by prepros so if I go to my settings here and I go to file Watcher that's one of the thing if I brought it in with node I would have the same thing um so you can see here all the things that are being they're not being watched for updates and all of that and that means if I was going to actually work inside of this prepros wouldn't compile any of the code that I'm working on because it's ignoring this folder so obviously I don't want it to be doing that and I think I just closed preos by accident there and I want to keep that open CU I'm going to be using it what I want to actually do here is I want to copy some of the things that are in this folder into my own area where I will be working on them but I don't want to take everything because most of this has already been done the only things I want are this custom.css file and one more file which is all the way down here which is my bootstrap.css so I'm going to take them and then we'll go and look at what those actually are so I'm just going to select both command C go all the way down all the way back to my route make a new file I'm going to call it uh scss um now you see some people in here will just put the bootstrap stuff or they'll make one other thing um I I treat this like a normal project so what I'm going to do with this is I'm going to do a vendor and my bootstrap will be inside of there um I guess I could just call it bootstrap as well but it's vendor um and so let's go take a look at what these actually are so I have to open those up in Adam so let's just right click on here and do open the whole project with adom so we can take a look at what's going on in there if you know Adam sometimes it can take a while to open up oh I didn't open it so let's go take a look vendor custom and bootstrap so the bootstrap is their big import file it's importing all of the things that are going on into one file that will get compiled into a CSS file and if I go and I look at the custom this is where they're setting it up to override any variables that you want to override so if you want to override your colors or you want to override uh anything at all we're going to be taking a look at their variables in the next video it's an insane file it's really cool uh and really powerful so instead of working off of their file we want to work off of our own file so that's what I'm going to be setting up to do in this video um so you can see here variables C there's the custom being imported right there um the thing is I didn't take everything out of the original one right most you know all these things that is trying to import other than custom are all the way over here so what I want to do is I actually want to come down here and place my cursor on all of these so I'm just pushing control on my keyboard right right now if you're on a Mac you can push command on your keyboard and just hold it down and just keep clicking away to select them all and we're almost there we're almost there there is a lot of them but this saves us so much time because we can just type something once so what I'm going to do I don't really need to scroll back up but I'm currently in this file so I need to go so I'm in my vendor I need to go into my scss so back one step then I need to go back one two so I want to go back into the root then I want to go into my bow whoops underscore components and then I want to go into boot strap and then I want to go into scss and before you click on anything go all the way to the very front here and comment it out so this is what's going to make bootstrap work for me in my project I don't need to bring all of that stuff in now a lot of this stuff I will be my variables I definitely want to use my mixins I'll definitely use custom I'll definitely be using except custom I didn't need to change custom staying right there um normalize I will definitely use print I will definitely use um just so you know they've added this reboot which is their personalized version of the normalize so they're taking normalize and sort of putting some of their own opinions into it and starting with the next version that will be released or when whenever the beta comes out um this will be the only one you won't actually see a normalized file anymore they're putting everything into one uh file instead of having it two things working off of each other um type I want images I want code I don't need the grid I definitely need tables I'm not going to use forms I'm not going to use buttons I will and the cool thing with this is if ever you decide to add some stuff in later you can always come back through here and add it so I don't need any button groups maybe later on my project would get bigger I'd need a button group all I have to do is take that out and all of a sudden I can use my button group nav and Navar I will be using cards I will this is replaced Wells and one other thing uh badge Jumbotron alert progress media list group responsive ed cloth I don't think I'm going to use any other JavaScript and the utilities I will be using so what this is doing is it's making a much smaller CSS file when all of this finally gets compiled it's going to take all of this um but I'm not taking everything I'm only taking the things that I want to be using so that's one of the nice ways of using bootstrap properly or only is only using the parts of it that you actually need uh and not having this big bloated CSS file for nothing uh now before I save this just because of the way prepro works it's going to compile it right away uh what I want to do is make a new file save this and I'm going to call this file main. sccss so I just want to make sure I'm oh I was in the right spot actually uh main. SC scss and I'm going to hit save and uh bring in boot strap will be the first thing I do so I'm going to do an at import and we're going to import uh vendor SL bootstrap and I'm going to hit save hopefully that compiles properly let's hit save here I think I ran into a problem I did because that is exporting this which I don't want so I'm going to delete that now let's go look at prepro to see what the problem is I might have made a mistake that looks okay okay let's try this one more time actually ah it worked okay I needed to save my bootstrap this file before I saved that one just because I'd made all these changes um just to show you the error log actually um the first time I tried to do it it was trying to just import variables it couldn't find that so I got an error I saved this so it wasn't looking for just variables it was looking for it in the right place um [Music] done a lot of it's just going to fall into place cuz bootstrap does so much for us so it's going to go pretty quick after that I think so thank you so much for watching hit that like button if you enjoyed this video if you have any comments any questions just leave them on down below and until next time try and make your corner of the internet just a little bit more awesome