How to use Google Chrome Inspect - Removing Overriding Bootstrap styles

Hey there, this video is all about, “How the hang do I know what's making this background gray, and this button blue, and the text this size, in Bootstrap, when I didn't create it.” So I'm going to show you how to use Chrome's Inspect, to dig around, find out what CSS it is, and then decide whether to override or not to override, that is the question. 

So the main part is using Chrome's Extension, or Chrome's Developer Tools, but we are actually going to remove the background, and change the size and the color of the H1, while we're here. Let's get stuck in. Before we get started we're going to talk about the battle in front of us. This is going to be our biggest test yet, and going to be the last thing for this course, is Project4, our meaty Yogurt goodness. Now this is going to put our, all of what we've known to the test, because we're doing, not just building it ourselves, with things we know. We're actually going to start interacting with Bootstrap. 

We started off building, just throwing in all the bits and pieces. Remember, Jumbotron, and drop-down Nav. So we threw it all in there, it was super quick. Now we're going to do battle with Bootstrap, using all of the knowledge that we learned earlier in the course. Maybe you don't think of it as a battle, think of it as a puzzle. Everything can be solved, and I'm going to give you tricks in this next kind of section of the course, to figure them out, and we'll work out a bit more Bootstrapyness. All right, so let's get busy. 

Let's jump back into VS Code. So I've closed down what we were working on before, and reopened our Index and style.css. Kind of looks like this at the moment. Just in case, because we jumped in and out of this file a little bit, getting kind of body going, and messing about with it. So if yours-- if you find a little bit through this course, or at least through this video, you're like, "Hmm, it's not doing the same," you might want to go to the completed files and open up mine. I've made a special one. Instead of saving it at the end of the video, I've made this one that says, "Begin”. 

So the completed files will be in a folder, in your 'Exercise Files'. Look for the one that says, "Begin", if you want to kind of just, like, "Let's just start with Dan's version, so that I'm following along if anything goes wrong." So the first thing I want to do is, we're going to skip the Nav because it is a little bit more complicated, and if we learn some of the easier parts, like this Jumbotron and these cards, then we can come back to the Nav bar, and it will be a lot easier. 

So we're going to start with the Jumbotron, which is this big thing here. So let's go to VS Code, and what I want to do is I want to get rid of the gray background first, because, let's have a look at it. It's not what I want on my design, so I'm checking-- you have got a mock-up in your Exercise Files to see what we're doing. So 'Exercise Files', 'Project4-Yogurt', and there is a mock up. There's a PDF in there with both, kind of Mobile version and the Desktop version. I'm going to open the actual file in XD. 

So there is no background color. I'm going to see through to the background, we've already added the gradient earlier on. So now we need to remove the background color. And this is going to-- this brings up a really good point. Like, how do I know what controls the background color of a Jumbotron? We're going to use Google Chrome, and we're going to use this Inspect. 

Now this thing here is going to drive me mad. It's going to keep flicking the whole way through, isn't it? It is, oh well, we'll live with it. So up here we're going to right click anywhere kind of in the gray background. We're going to go to this one that says Inspect. Now what I'm going to do is I'm going to turn off my ‘Device Preview’, so it just shows me the whole thing. I'm going to have to move mine up a little bit, and hide that slidy thing, because it annoys me. So we're going to click this button here. This thing here is like an interactive, moving around button, that will start kind of highlighting things. 

Can you see the HTML, keep an eye down here. It just kind of jumps and opens up, depending on what I've got hovered above. So I'm going to kind of click where I feel like, I've got the background of the Jumbotron. It tells you what Classes are applied to the Div. So something called Jumbotron. And over here it says, the Jumbotron Class, using the small size, is giving it some Padding. Also Jumbotron in general without a Media Query, is telling it to have a margin at the bottom of 2 rems, and a background color of this gray, and that's what I want to tackle. 

So I want to tackle the Jumbotron, the background color, and change that. That's kind of the way of kind of digging into the Bootstrap, and working out what you need to change. You could go through the documentation, try and figure it out, but often easier is just to right click 'Inspect', and then turn this one on, then click on it. Let's go find it, let's make a Class called Jumbotron. So in our CSS, I'm going to say, '.jumbotron' is going to have a background color, 'background col' of, I'm just going to pick any old color, and then put in my closing semicolon. 

Now I'm going to hover above it, and get this random thing that pops out, and it's going to go straight down to completely see-through. Doesn't really matter what color it is as long as it's completely transparent. So this last one needs to be 0. Let's check it in the browser. There we go, we've removed that background, that little guy's still sliding, but we removed that background color. 

All right, next thing is this H1. Let's mess around with the size. We'll do size and color, it's not quite matching my mock-up. My mock-up, I want it to be about 70 pixels, and in here what I can do, again, I can click on this little 'Inspect' element, then click on it, actually I can just hover above it. It did, it says, it's font, can you see just above it? I can't really click on it, but it says, the font is 56 pixels, which is weird, you're like, "Hey, I thought it was being-- you can see it over here, I've clicked on it, it's says, being display 4, which is making it 1.5 rems. And you're like, "Why is it 50 over here, or 54?" It's because, actually this is like telling the browser, it should be 3.5 times the default size. The browser does the calculation, and that ends up being 54. 

So that's what the CSS is saying, the browser kind of sees the end result. So I want it to be exactly 70, and this would be a good case of going over and say, "Actually I'm just going to override the H1." I'm going to say, "Your H1 are a specific font size of 70." Font size, 70 pixels is what, equals, it is 70 times, was it 0.0625? You remember that yet? You've written it down somewhere? So 4.3, so wanted a bit higher. So I could say that now, I want that to be '4.', I could just say, 4.3 rems, and would that work? Probably not, because what's in-- let's have a look. 

I can right click it, 'Inspect', you can see over here, it's still 3.5 And it's telling me down here, your H1's trying to tell it to be 4.3, but it's been crossed out and overridden by this one, why? Back to this thing called Specificity. So in here-- H1 is very vague, you can see, H1 is what is applying to this, but then there's a Class on top of it, that's a lot more specific, to say, do this other thing. So it's overriding it, so if we want that to take effect, we need to delete this Class of it, and it will work. Let's have a look. 

Now, you can see it is 4.3 rems, and right clicking it up here, 'Inspect', actually, use this option, and you can see, it is 68.8 pixels, because I left off some of that-- should have put in 3.75 to get it exact. So that might be a case where you're like, "Actually, that's a good idea, I'm going to get rid of all that," but to override or not to override, that just totally works. 

Let's say I don't want to do that, I want to kind of keep it nice and clean, because we worked out over here-- I'm going to undo it. That fall was close, wonder if I could go up to 5. 5. What is Display 5? We'll check in a sec, but let's just have a go. It's a lot smaller, so is there any other way we want to go? 3, gets a bit bigger. You can see there, it's actually at 72 pixels now, which is like, "Eh." As good as 68 was, in terms of being off a little bit. So there are lots of Classes to control things like font sizes. Let's have a little look. 

So on Bootstrap, go to 'Documentation'. Knowing where it is, is troublesome, in the documentation. So you can start with the search, maybe do a Google search, but you'll end up under 'Content', and 'Typography'. And in here these are all H1s, 2s and 3s, that's what they look like by default, and then, underneath it, a bit further down are displays. We kind of touched on these earlier. You can see, 1, 2, 3, 4, there is no 5. Maybe it just defaulted back to none, when I put on 5. So you can work with these, if these work, perfect. You're away, they don't, then you're going to have to start overriding it with your own custom styles. Same with the font color, let's say that I want to go through. I could style this and give it a color. So I could go 'font color-white', but is there a Class? And in here, under 'Typography', I think it mentions that down the bottom; color, color, color, color. 

Somewhere in here, where is it? I think it's actually under 'Utilities', 'Colors', there it is there. Primary text colors, you can see there's a bunch of them. There's primary, secondary, success. We're going to use, we're looking for white. So 'text-white' is going to work. So let's go and grab that. So instead of creating a Class over here, making it white, we can just say, actually, you were that, and you are text; what does it say? '.text-white', let's have a look. Hit our browser, and it's white, and this is a very good point, you're like, "Why did I do-- is it-- which one?" It doesn't matter. 

You got to get half used to this if you're going to embrace Bootstrap, because you're going to work on other sites, potentially that has Bootstrap, and while making the text white is not that important, what tends to happen is, these get baked in with other things they do, not just making it white, or in this case it does, but let's look at, remember we're using 'col' for the columns. We know that that's got lots of other stuff going on, where it breaks down on different Media Queries, and all sorts of other cool things. 

So as a kind of a blanket rule, I would try and do it, in your HTML, using pre-made Classes. You're going to run into less problems unless you're-- until-- because if you start trying to override lots of things, it can cause like knock-on effects. So we've removed the background color of the Jumbotron. We have changed the H1 over here using Bootstrap stuff, I guess the big reason we did this video, is showing you how to use Google Chrome's Inspect. 

So let's show you one other cool little thing you can do, is, let's say that this, moving like-- what are these? What controls these? We're going to right click them, go to 'Inspect', and it's going to highlight it and say that it is-- what did it say down here? It's highlighted at blue, and it says it is the Class called 'carousel-control-next-icon'. And that's what that does, and you're like, "How do I?-- now you can go off and find that Class, and make, either Override Amends, or find other options using Bootstrap's documentation. 

What would we do if we typed in--, I happen to know it's 'prev', not previous, and I click somewhere else, can you see here? It's moved to be the other way around. And it's just a good example of, I can actually edit the code over here, and over here, while I'm in Chrome, just to kind of like test things, rather than going back to here, doing it here in my, like working copy, and then testing it and undoing it. 

You can actually do it in the browser using Google Chrome's Inspect. Let's say we want to change the color of this, or the color of this blue thing. So I'm going to right click it, inspect it. Instead of going back and figuring out what button primary is, I can go in here and say, there's a color called this. I'm going to turn it off to make sure I'm attacking the right thing. Doesn't seem to change it at all, Border color, 'off'. Where is it getting its color from now, because that was the Hover, you see down here, there it is. 

So I don't want to mess with the Hover, I want to mess with this one, because that's where it's getting its kind of, like initial color from, and I can change it in here, I can say, actually you're FFF FFF, white. White takes on a white background; good work, Dan. But I guess I want to show you how you can just mess about with things in here, and just kind of test them, using Google's Inspect, before going and working on your own document. 

That's it for this video. Google Chrome Inspect, the Developer Tools, super helpful. Let's get on to the next video.