How to add shadows to text & boxes in Bootstrap 4

Hi there, this video we are going to add text to the H1 along the top here. Nice little subtle one. We're also going to change the text here, to be this Lead text, to be bigger and white. We're going to move the button up, delete a chunk of stuff we don't need from our current site, but really what we want to do in this video is show you how to work out, "Is it in Bootstrap, do I need to do my own custom style?" The processes of that, at least the ones that I use; let's get going. 

This video is a really good example of what happens when Bootstrap doesn't do it all, and you have to do your own stuff. So this is the process I go through, where I get bootstrap.com, you're like, "Okay." I want Drop shadows, I'm going to get a documentation, I'm going to type in, drop, waiting for it to-- no drop shadows, I'm going to try drop shadow. There we go, we got shadows, examples, utilities, let's try one of these. You're like, "Awesome." Some pre-made shadows, you're like, "Excellent." So in this case there are examples, you can kind of see down here. Shadow, small. Shadow must be the regular one, and then the Show Large. Let's put in the large one just to see. Let's grab it and let's put in here, you're like, "Easy, man. Good work, Bootstrap." You know there's a punch line, right? 

I'm going to delete that, ah, it does break in two lines. Cool, let's have a little look, and, boom, you're like, "Yeah." It's not what I want, I want it around the text, not around the block, the H1 block. And searches, am I? I can't find the version of text. I did a Google search, and nobody had an answer. So you eventually kind of get to the point, you're like, "Huh." Feels like something it should have, but it doesn't have at the moment. At least at 4.3, at least that I can follow, or find. So this is where, in a good cases like ours we're going to do our own thing. So we're going to create a reusable Class. We're going to say-- we're going to create something called Drop Shadow. 'drop-shadow'. Doesn't exist at the moment, so we're going to create it over here. We're going to call it 'drop-shadow'. And we are going to do, because we've done Drop Shadows before, so now we can use Bootstrap to go fast, but we can use our own sweet Web Design skills, to kind of extend Bootstrap. 

Have you any idea what it was called? You do what I do, is you go back to the old document, that you had Drop Shadow in it, and go and find the Class that makes it work. We do a Google search. I only remember Text Shadow because of teaching, and because we use lots of Drop Shadows. And remember it is, how blurry it is first, remember it is, XY, then blurry, and then color. So for the X, I don't want it to go anywhere, I'm going to use 0. For the Y, I want it go down just a couple of pixels, and how blurry do we want the kind of Drop Shadow? I'm going to have it like two pixels blurry. I've practiced this already. I'm going to type in the color for black, only because I want to come straight back in, click on it, and go, down here somewhere. there-ish. I've used 15%, so 0.153 is going to work for me. So let's see if that all worked. In here, look at that. Bootstrap and yourself working together to make a better website. 

A couple of other things I want to do before we leave is, remember this? This was called the, I think, Lead, made it a bit bigger. So I want to change it, I want to make it white, and maybe a bit bigger, because I want it to match my mock-up here, with real meaty chunks, I haven't acknowledged the meat yogurt. I thought it was-- I didn't think it was a great idea, I thought it was a funny idea, and you are now stuck with it as a course project. I spent way too much time designing logos and products. Best yet is, I'm totally vegetarian, but it seemed funny at the time. 

Anyway, we want to make this kind of white, and bigger. So what you do is, I'll show you the process. We've seen this, what can we do with it? Remember, we right click it, then we go to 'Inspect'. We're going to check it out, and it's using this thing called Lead. So we go to 'Bootstrap, we go into here, and we say, 'lead', tell me more about Bootstrap. Let me say, that sounds good, Typography Lead. And it says, Lead, does all of this, and then there's nothing else, and you're like, "Huh." So there's no words like Lead1, Lead2, so I know, I'm going to have to do a custom thing. So I'm going to go into here, I'm going to say, I'm going to say, '.lead', I'm going to use you mostly, but I would like you to be a color of white, not wheat. White even. And I want to change the size. I've worked out the font size using my crazy calculation, is about 2.2 rems, and now hopefully, let's have a look. 

Hey-ho, we need to change the text out, we'll do that, and we'll get rid of some of the lines down here. So in your text document that I gave you, you can type this in, ‘Thick & Creamy’. It's going to go in instead of Hello World. ‘Thick & Creamy’. And with real meat chunks. Let's get rid of all this P-text. Make sure you don't lose any of the brackets. There we go, save it, now let's have a little look. All right, it's getting close to our mock-up. Where's our mock-up? There it is. We're getting there. 

Other thing I want to do is, I want the button, because that's in my mock-up there. There's the button, we're going to change it, but there is no line, and no text, so I want to get rid of these. So first up, pop quiz, what is this? Pause it, have a little look at it. What is the HR, and my-4 is? I'm waiting. Paused it, you back? All right, you're back. So HR, remember is a Horizontal Ruler, goes all the way across. Even though I said in a previous kind of tutorial, that it doesn't get used much as an HR anymore as a ruler, in Bootstrap they kind of ignore that role, and use it again. And what does the 'my' stand for, do you remember? You got it, it is margin, and it's the up and the down, the Y-axis, and 4 is just the size of it, right? 

So if we make it bigger, it's going to have more space. If we do a smaller one, it's going to have smaller space, but we don't want any of it, we don't want you, or you. Goodbye, we'll leave the button in there, but instead of saying, Learn More, it says, what does it say? It says Pricing. That is going to be it for this video, and it's less of showing you everything that Bootstrap does, and more about, like how you work out what Bootstrap does, what you might have to do yourself, like Drop Shadow, and our Lead, and you can start to see why our kind of skills, pre-Bootstrap, are really useful now. Adding Classes ain't no thing now, creating our own custom Classes not much of a drama. We're getting good at this, mean you, and we'll get even better in the next video. I'll see you in a sec.