Quick overview of how Bootstrap Components works in VS Code

Hi there, in this video we are going to look at an overview of Bootstrap's components. The most exciting parts of Bootstrap, watch, sliders move, look at this, we've got really easy Jumbotron drop-down menus. The menu changes to mobile when it's small. Got these cards going, and literally we do this in this video. Look at the length of it, it's kind of about 12 minutes, I'm guessing. And we've done all of this real quick. Components are amazing, let's jump in and get working. 

We are finished with our overview of layout. Let's close it down, let's go back to the Index page. What we're going to do is we're going to throw in everything. We're going to get rid of our H1, and we're going to throw in all the components, that we are going to use to build out our Project4. First thing I want to do though is add our Container. So let's go dot container, '.container'. Remember, has to be spelled exactly right, so that it matches Bootstrap's kind of use to the Container, and inside of this we're going to throw in our components. Now we're talking about components briefly, there are things like Image sliders and Navigations. Let's have a look at where to get them from. 

So in Bootstrap, we're going to go to documentation, where we're going to spend a lot of this kind of section of the course. We kind of looked at Layout, we looked at Components next, so click on that. There is lots in here, exciting cool stuff, We're not going to go through each of them. Right now we're just throwing in the stuff that we're going to use. We're going to start with the Nav Bar, not Navs, Nav Bar. In here, basically you can scroll down and just look for the one you want. That one has, I think it's the kitchen sink version, it's got every single thing. Lots of different options, just with Text, just with Navigation. We'll grab the kitchen sink version right at the top here. 

So it's the first one, so just underneath here, let's grab this, click 'Copy'. There's a bit of code that goes on in the HTML, but watch this. Let's go to VS code, inside of our Container, let's paste it, let's save it, let's preview it in a browser. I'm going to turn it off, turn it back on again, let's have a little look. And look at that, we have got a Navigation and a Drop-down. Remember, we had to make a navigation? There's a search bar that doesn't work, button with hovers, all the stuff that's just ready to go. 

Now in your HTML, we're not going to do it exactly all now, but you can go through and say, instead of the word Home we can call this one the Dan button. You can see, we've got a Dan button. We're going to have to stop messing with the layout, or moving and adding things later on, but I guess I want to excite you with what Bootstrap can do very quickly. 

Now the next thing we want to add is, we want to add something that does the drop-down work in this one? It does. Because we haven't added, in our Index page, we did, that's why it's working. Remember we added this JS code here, sorry, yes, JavaScript code. In our little throwaway overview layout we only added the CSS, and we didn't put in the JavaScript, this Index page, if you are just following along with a throwaway file, you've got to make sure the CSS is in the Head, and all the JavaScript is in the bottom part here. That's why all these components are working. 

So that is my Container, that is going to be my Nav. I'm going to add a little bit of comment, "This is the Navigation." Next thing I want to add is going to be my carousel. Carousel, is that close? Anyway. Let's go and find the carousel. So if we want a carousel, we look under 'Components', and we find 'Carousel'. Same sort of thing, have a look through some of the examples. That one's just a plain old slider, this one has some arrows, we can click through it, and decide which one you want. Oh, it's got little buttons on here, someone's got text, and all. So decide on which one you want, I'm going to go for this first one, because it matches my design. I'm going to click copy of the code underneath, then just paste into VS code, and you're like, "It can't be that easy again." Yes it is, friends, well, kind of, it's looking for images, a bunch of images that aren't there. 

So we're going to grab some images from our Exercise Files and throw them in. We're going to go to 'Exercise Files', we're going to look at the 'Project4' now, our little Yogurt project. And images, instead of copying them all over one by one, as we've been working, you're like, "Why doesn't he just copy them all over at a single go?” That's what I'm going to do now. I'm going to grab the Images folder and copy that. Go to my 'Desktop', find my 'Project4'. I'm going to paste it in here, the whole thing. All images for the project. So, now what we can say, instead of loading this image called dot dot dot, we're going to say Images, and Product1. Can't remember which one we were meant to be using. Nope, Yogurt1. So Yogurt1, perfect. And let's do this, actually we do both at the same time. Holding 'Option' on a Mac, ooh, here we go. Holding 'Option' on a Mac, and clicking twice. On a PC it is 'Alt' to get the multiple cursor. 

Let's type in 'Images', I'm going to put Yogurt in, twice. I'll change this one to 3. Now definitely go through and change your Alt text to describe the image, and let's have a little look now, now it's that easy. Wait for it, does it have automatic scroll? Wait for it, we're all waiting, Dan. There it is. There are little errors there but they're white, you can't see them. We'll have to change the color of those, can you see them flashing there? But you get what I mean. Look how cool that is, and easy it was to implement. There's an auto timer going. It's jQuery goodness without us doing any jQuery. So basically it's a snippet of code we paste in, and we can edit later on, with our mad CSS and HTML skills, making us look super good, super quickly. 

All right, next one. Above the carousel, I forgot, I want the Jumbotron. So just above it I'm going to put in my CSS, and you're like, "The what?" The Jumbotron. Not being from America, I had to Google what the Jumbotron was, and makes perfect sense now. That's a big giant billboard that goes in the middle. So let's have a look for Jumbotron, it's your like Hero image. It's your, it's, "Welcome to the world, here's what we do, buy our stuff." So find the one that works for you, this top one is. So I'm going to copy it and paste it. Jumbotrons in, you can see, H1, I know how to do that. There's some Classes that are special for Bootstrap, which we'll learn as we go, but the cool thing about them is when they've been implemented - let's have a little look. - you can see, it is nice, buttons are nice, there's a nice little hover there. 

And when I break it down to get smaller it breaks down nicely. And the most exciting bit I almost missed. Watch the navigation, ready? You're like, "Oh, that is way more easy than Dan's jQuery course video he did." It's like 25 minutes long, but we need to know, so that we can make adjustments, and fix it if it's broke. And for the people, there are lots of people who won't use Bootstrap, and you're like, "Why wouldn't you? It's because I want to customize everything, but I do get excited at this stage, when it's nice and easy, and we start throwing things up, and I'm like, "Yeah, I should use Bootstrap more." 

All right, next project, definitely Bootstrap. Let's jump back into VS code. Let's add one more thing for this kind of like introduction. We're kind of half building a site. So I'm going to add something called a card, it's cards, plural in this case. Let's have a look. Bootstrap, I'm going to make it bigger so we can see all the bits. I want to add one of these cards. You may think of them as tiles, just nice and easy, reusable thing, I'm going to copy them and I'm going to throw three of them in. 'Return' between them all, they were doing something weird for my Returns. I'm going to make sure they all line up, by selecting them. Go to 'Format Selection'. Nice, let's have a look at the cards. 

In our document, down the bottom here, they're stacking on top of each other. The images are a little bit broken, we might as well switch them out right now. So in here, while we're here, I'm going to use my multiple cursor. You're sick of me giving the shortcut now? It is 'Option' on a Mac, 'Alt' on a PC. Kind of like it, make a dream of the shortcuts. Then we change this one to 2. 3. Let's have a look at it. You can start to see, like our Mock-up is here. So Navigation and some Drop-down, we're going to make it simple. It's easy to remove things, starting with the kitchen sink menu, and kind of going, tearing it back. This is going to be my Jumbotron. So I'm going to have to style this quite heavily. This, I'm going to make custom. This thing here is my little slider thing, goes left and right, but you can see how quickly we implemented that, and these little cards down the bottom, we got them pretty close to start with. 

So Bootstrap's just a nice quick way of throwing together a site. So all of the kind of functionality is built in, ready to go, and you can just change it. Components is probably the most exciting part of Bootstrap. We're not going to go through all of them now, but you can start having a little look through, all the different things that you can implement. The cool thing about it, is because they do the hard work, you can kind of sell it on to your client as a feature, knowing that you can use Bootstrap to do a lot of the hard work. 

So that's the brief overview of Bootstrap's components. Let's look at the last bit, so we've done an overview of the layout, then we looked at this overview of the components. We got one more to go, we'll look at the Styles.