How to re-create the Bootstrap media queries in your own CSS

Hello there, in this video we're going to recreate all the Media Queries that Bootstrap use, in our own CSS, that we can do our own little tweaks, because Bootstrap has some pre-defined ones. We've seen the Media Queries at the top here. We want to recreate them because we want to make this text here change from pink to blue, to red. All right, let's recreate the Media Queries, and get our song struck in our head for the rest of the day. 

For this video we want to recreate the Media Queries, so that we can override them, we want to match the Bootstrap ones. You don't have to, you can make your own Media Queries, but it would be weird and hard, because you'd have Bootstrap fighting against you. Then you'd be-- if you still want to do it, you might consider like, "Is Bootstrap the right thing to be using, or should I just do in my own thing?" 

So let's say we do, we love the MD, and we love the SM, the LG, and they all were good, but there's just things that Bootstrap can't do, or won't do, we can't work out how to do it. So we need to recreate the CSS, our Media Queries, over here. It's pretty easy to do, go to getbootstrap,com, and under 'Documentation', it is under, can't remember, 'Contents', no, it is under 'Layout'. Just scroll down a little bit, and here are all the break points. 

You can just grab all of this, copy it, let's paste it into VS code. We're going to paste it in, couple of weird things we're going to do, is it's using the commenting that is, this '//' is a single line comment, and doesn't work for what we're doing. We're going to grab it all, and just wrap it up in our, like proper CSS commenting. So I'm using the shortcut, 'Command /', and just need to make sure'/#' goes either side of it. Do the same for, you my friend, for you my friend. I think this is for the SAS Final. I never use that kind of commenting anyway. 

The other thing that needs to happen, is that this really needs to be at the top, because this is like the Global, remember, we did Global before. So Extra Small, considered Global, we did Desktop earlier on, but Bootstrap likes to do Mobile first. The other things, is these dotted dots, just kind of place holders. I'm going to 'Command D' them. So I've got all of them, or 'Ctrl D' on a PC, I'm going to delete them, put a 'Return' in, so that I've got all my separate Media devices ready to go.
 
To prove they all work, let's go into our Logo Nav Hero Box. The Hero Box, let's put in an H1 inside of that box. A classic Header, and I'm going to say that the default for it is going to be, so my H1 is going to be, let's say, color of red. I'm always going to work our way through our Media Queries. You know how this works, so that's default. If I don't change it anywhere else, it's going to float at the document, and that's going to be-- doesn't matter what device size it's on, it's going to be red, unless I say, on Small, I'm going to make you blue. 

Let's do on a few of them, let's skip Medium, let's do this one. Let's pick a, more exotic color, we got pink. And Extra Large, we'll ignore as well. So it should work, let's have a little look. Should start at red, and get over ridden, to blue, then goes to pink, on my Large. You can have this here, it matches Bootstrap perfectly. So it's going to change with the, say, like in this case, our, I will try with the structure changes, and as such you might have to make the H1 a smaller size, or a different color. There are some default sizes you can use for text. So we can look at that a little bit later on, but there'll be times we just want to, like, "Just do what I say, please." 

Couple of things to tidy up before we go, we should really call this one, this Container, we should call this, instead of a Div, we should call it Header. And this one here should be '/header'. And where's my Nav, so there's Nav box inside of the Header. Should be this, it should be that. My Hero box here, I should call this one 'Main', and the closing of the Main. I don't have a Footer at the moment. I want to get used to it, because we've done rows and columns keeping it separate, but you will find, this Class applied to all sorts of different tags in HTML. 

All right, that is going to be it. Thank you for watching, thank you, Bette Midler, I'll see you in the next video.