Quick overview of how Bootstrap CSS Styles works in VS Code

Hi there, this video we are going to look at an overview of Bootstraps styles. So we've looked at its layout, we've looked at its components, now we're going to look at this third option for its styles, and all it is, is pre-made styles that Bootstrap have made for us, that we get to apply with simple Classes, that's going to do tedious things for us quickly. Like a giant button that has rounded corners, and a line around the outside, and a hover, we can apply it quickly. There are lots of different options and styles to pick from. Bootstrap's done all the hard work, we just got to work out which Class to add. Let me show you how it all works now in VS code. 

For this video we're going to close down everything, and work on a kind of a throwaway file. What we might do is go to 'Index', and actually just grab all of this. Copy it, so we don't have to do the shrink-to-fit: no, and add the JavaScript back in. So we're going to steal it all, make a new file over here. We're going to call this one 'Overview'. We'll call this one styles.html. Paste it in. We'll go and delete everything that's inside this Container. So all of you guys come with me, you're right here. All we've got is a Container in here, let's just throw in some basic HTML tags. So let's throw in an H1, underneath-- let's put some stuff inside of it. That will do. Okay, a P-tag. Let's put in some Lorem Ipsum, maybe just 10 words. Nice. Let's put in a Button. Let's call it 'Submit', submit even. Let's put in an A-tag, that's going nowhere, we'll put some text in it. It's going to the Contact Us page. Just some generic stuff, and let's just see what Bootstrap does have by default. 

So I'm going to have to close that, open it back up. Cool. So you can see, it's got a kind of a look to it, very Bootstrap look. The nice thing about it is, especially if you're new to design, or that's not really what you love doing, you're like the build, but not so much the picking fonts, or at least you're not good at it, Bootstrap can really help out, just like, instantly make it look nice. 

The other cool thing is that it's not just left like that. What you can do is you can go into your getbootstrap.com, and start looking through the documentation. It does take a little while to get used to everything, but there is some super handy stuff in here. So let's have a look at-- so Styles, we talked about Layout, it's got its own bit, Component's has got its own bit, but then when it comes to the styles that Bootstrap uses, it’s kind of smeared across lots of them. Lots of them are inside utilities, but some of them are their own components, and I'll show you what I mean as we go through. 

Now if you talk to other people they'll be able to tell you exactly, when they say-- when you say, "Hey, tell me about Bootstrap Layout,' they'll know exactly what you're talking about. Same with components. When it comes to styles it's something that I've made up, to kind of encompass all of the other things that it does. All of the utilities and extra bits, all the styles that adds pre-done for you. Those just mean you are in the know. So utilities starts with borders, you can see you can add borders real quickly, by adding just these classes. We're not going to go through them all, but let's have a look at Text, nice easy one. 

So Text Alignment is super easy, you can do it for Media Queries as well by using-- If I want it to apply text on small devices, left, but then again, on right, for larger devices you can just add this Class, rather than trying to add it to different Media Queries. Let's actually just do something, let's have a look. Let's say we want it all uppercase, so you can see here, my P-class can be a Class of uppercase, and that's all I need to do. Let's go, let's grab this, and in VS code I'm going to say, my P-tag has a Class, of text uppercase. Let's have a look in the browser. You can see, hopefully, there it is there. All uppercase, don't have to do anything. 

Let's say that I want it to be something else. Let's have a look, I've got text for weight. So let's say we look at P-class, we don't have to create a Bold Class, and then apply it to it, it's ready to go, already in there. So you can see, Bold, Italic, I'm going to copy that, I'm going to go into here, I'm going to say, I also want it to be-- so uppercase, and let's say that I'm going to put a space in it, and I say, I want it to be a Font Weight of bold as well. Now it's going to be uppercase and bold. Cool, uh! You can see, Text Decoration by default is off, with the underline, just sits there nicely. Buttons have some nice things, so let's look under here. This is where it gets, not messy, but, I'm like, "Oh great," all that sort of styling stuff is on utilities, but then Buttons is under Components, okay, Components, Buttons, you can see, if I add a class of BTN Primary, it's going to look like that, pre-done with colors, and all. 

Let's have a look, Button and Primary. So where is my Button? He's going to have a Class of, Button and Primary, let's have a look. Look, he's ready to go, he's got rounded corners, he's got a hover. Ah, it's all very cool. Not as exciting as the Grid, definitely not as exciting as the Components, but the nice thing about it is that lots of the stuff is ready to go, it's very clear what it does, and often they're all kind of like ready to go, in terms of making sure they're ready, for different Media Queries and different devices. 

Look at this one, there's a Button Primary outline as well. There's a large Button, so let's have a look, let's just add some more. I'm trying to make it more exciting. Does that work? Maybe not, but you can kind of see, it's just, you don't have to work out what the weird, Border Style solid, and then 1 pixel, and then just add that to it, it's got some defaults, And when we start building our site, I'll show you how to override it. You can see there, I can make a Button large, I can make a Button large, or Button small, by just adding another one. Let's add it. This last one, and you'll be like, "We get it, Dan." This is the last one, I'll make it the large Button. I don't have to go pick sizes, just a giant Button, with a Primary color, with line around the outside. 

The third, but not as exciting part of Bootstrap, lots of stuff, pre-made, ready to go. So quickly wrap up before we go. The overview for the grid was the actual structure of the website, the boxes that we put stuff in, and it included all the things like Media Queries, then we did the super sexy one, when we had Components. We had a Carousel slider that slid across the screen, then the Navigation that broke down for mobile, then back into our Main Navigation for desktop, and then this guy, where it's just lots and lots of pre-made Classes, to help you build a site quickly. 

The trouble is, trying to remember them all. So the cool thing about Bootstrap's website, the getbootstrap.com, the search thing works reasonably well. So if I need to find my carousel, because you can't find it anywhere, you can see, if I type it in, it takes me to examples of carousels, and I can jump there, and go there. Sometimes you got to try and guess the word, you're like, "Where's the thing that has the bit with the Bold Type?" And you can kind of just type it in, and just see where you can get. In this case, failed, borders I know, there it is there, Font weights, Boldness. And what it will often do, and can be a little confusing, when you first start using this site, is that it's come to here, and you're like, "Oh, there's a whole page on Font weights." 

It's actually just come to this page, about text, that we were at before, and slid down the page to this marker for Font weights. They actually had that page where we had it before. So sometimes you click on it and it takes you to an overall page, and then slide you down, and you kind of get a little bit lost, sometimes. The other thing to do is actually just go, "Actually, how do I do Bootstrap?" Make sure you're using Bootstrap4, the latest version. "How do I left align?" So Bootstrap's search engine within its site is okay, but often it's easy just to go here, and Google will find it in the Bootstrap site for you, or good old Stack Overflow. That is it for the overviews, let's get into start building our site.