How to add padding & margins using Bootstrap 4 in VS Code

Hi there, this video we're going to talk about spacing in Bootstrap. It is similar to what we've done before when we did margin top equals 16 pixels, margin bottom equals 16 pixels, that type of thing, except the syntax is a lot simplified. M for Margin, P for Padding, T for Top, B for Bottom, ah, it's very good. Let's work out how to apply it now in Bootstrap. 

In this video I want to start working with Padding and Margin, in the Bootstrap way, the way it does it. Let's say I want to add a nice big white gap between the Grey fluid container and this red box underneath. So the old-school way, all the way we've done previously, is, in your CSS styles, you could say, I want to attack the container, container fluid, and I want to give it a margin at the bottom of XYZ, maybe 20 pixels. So that's that way, it still works, totally works, but what we're going to do is use the Bootstrap way, and let me show you the documentation. 

So at getbootstrap.com, under 'Documentation', under 'Utilities', there's this one called 'Spacing', and the spacing works like this, they've just done some shorthand. So they said, instead of writing margin, you just type in 'M', and for padding is 'P'. Then for the different size you've got top, bottom, left, and right, shortened to TBLR. If you want to do X, which is left and right at the same time, or top and bottom is y at the same time. Now in terms of the sizings, you've got kind of five options, six options; 0, 1, 2, 3, 4, 5. Let's have a little look at how they're applied. 

So the syntax is important. So what I want to do is, let's say this Fluid Container, I want to add some Margin to the bottom. So what I do is, another Class, it's a pre-defined one. So Margin, we're going to do bottom, so B, hyphen, and then the size. We're going to do the maximum of 5. We're going to go preview it in the browser, hopefully, and you can see, Margin Bottom has been extended out by 5, and you're like, "What is 5?" Basically they use the spacing of ems. So we know that by default the em is about 16 pixels. So if you use 3, that's using one whole em. 

So remember, the default font size is 16 pixels. If somebody goes into Chrome, in their browser, and adjusts it, these sizes are going to adjust as well. 5 is the biggest, and some of these smaller ones sets to 0 obviously, but you will find some of the components. Remember, our kind of carousels and cards we made earlier? They will have some by default. The default will always be 3 in Bootstrap. So if you find a component that's got Margins or Padding already added, it's 3. So if I put in 1 on top of something that already exists in Bootstrap, it's actually going to cut it down by 25%, or 25% of that kind of default spacer, which is the 16 pixels; makes sense? 

If you're adding it by yourself, anything above 0 is going to be bigger, but if you find something that already has Margin applied, and you add 3, actually nothing's going to happen, just going to be the same. If I go 2, it's going to be slightly smaller. 4 is going to be slightly bigger. One of the troubles though, troubles for me, I guess, doesn't happen very often, but there's no 6, and you're like, "How about 6, 7, 8, 9, 10?" You can adjust the spacings to add more measurements, but you need to get into the SAS file that is used in Bootstrap. It's way out of the scope of this class. 

If you do like-- if this is imperative, and you really want to go into it, you can look at the SAS styling, it's what's called a CSS Pre-processor, and it's a bit of, it's a way of kind of taking, instead of just our plain old CSS, this stuff here, just real basic mark-up, into actual programmable CSS. So gets a bit more nerdy, but if you want to get down that rabbit hole, you can go check out, I've got a course, well, not a course, a video that I did for Adobe. They commissioned me to make one. If you go to their helpx.adobe.com, and search for my name, and pre-processor, this will turn up, and I spend some time going through it here if you want to catch up. I've put a link to it in your Exercise Files as well, under 'Project4 Text', but again, out of the scope of this course, you don't need them. They are handy when you're dealing with really big sites mainly. 

Let's now add our free feature boxes, and add some Padding and Margins to them. So I want it to be inside the Container. So my Fluid Container ends there. This Container, I want to be inside of it, because I want it to kind of be centered. So I'm going to have a row, and inside of that row I'm going to have a column. Inside of that column I'm going to have my Mybox. I need three of them, actually I need to put these in, brackets. Thank you, code helping, and I want three of them. Inside of these people I'm going to say I would like Feature1, 2, and 3. Let's have a little look, how did that go? 

So I've got them here, it's not called Mybox, it's Mybox1. So these will match up, let's say I want some Padding to the bottom, of this Feature, all these Feature boxes. I can do it for one of them. I might as well do it to the row that it's in. So the row, I'm going to say, I want to Padding or Margin, it's not going to matter in this case, because there's no color on the row. So I could use Padding Bottom or Margin Bottom, and I'm going to use a nice big 5, let's have a look.
 
I've got a nice big chunk at the bottom. What I might do for this one up here as well, is I want the sides to get a bit bigger, because, just a bit too small either side. So these Nest boxes are called MyBox2. So what we're going to do is we'll put a margin of X, which is going to do the left and the right, of maybe 3, and I'll do for both of them. MX, MX. 3. Surprisingly hard to type when you can't see the keyboard. I should show you, my big microphone's in the way. Let's have a look, there you go. 3 is not enough, it's the same as the default. Come on, Dan, 5. There you go, way too big, 4. 

One of the other things I want to show you is let's say that you want to, so this one here, we'll work on-- because there is a negative margin. I'm not sure when I need negative margin, but we'll show it to you anyway. Let's say we want to have negative margin on this Nest box here. So Nest1, I’m going to get rid the mx-5. I'm going to say I would like a margin, let's say it's a margin of 5, which is going to make it a lot smaller. Can you see, there's a margin on the outside, pushing it in, and negative margin is going to grab that same green box, instead of pushing it in, it's going to push it out, which is kind of strange. 

All you need to do is put in 'N' in front of the 5, which means it's a negative. That's the kind of basic syntax for spacing, let's have a look. m and p, t, b, l, r, x, y for the different sizes, sizings, and there's some other stuff to read through here, but that's it for the moment. All right, I lied, there are two more things I want to cover. One is the Media Queries, so at the moment we'll be doing the Property, which is either of the Margin or the Padding, then you add the sides, which is top, bottom, left, or right. Then the break point, then the size. So we're going to add this break point which we haven't before. 

So it just means our Media Queries, remember, working with our document here, I'm going to go to 'Inspect', I'm going to turn on the Device Preview, and remember, these are the break points. That's Extra Large, Large, Medium, Small. There is no Media Query for Extra Small, it just assumes, in something called Mobile First, it just assumes everything that doesn't get specified assumes it is this XS, or this Extra Small, but we never actually write it. So let's make that happen, let's play around with the Padding for this P-tag, just for giggles, let's have a look. 

So my P-tag here, I'm going to add a Class of, let's say for-- one thing I didn't cover, is if I put an m-5 with no, like, top or bottom, or X and Y, it assumes all four corners. So that's the other thing I wanted to cover. So let's say I want a Margin of 5 around it, let's have a little look. So it's a Margin of 5 at all breakpoints. It assumes you're using Small, and because nothing contradicts, it flows through them all, but let's say-- let's put a space in, let's say I want a Margin of, let's say, 0, but I don't want to put the 0, I want to say, when it gets to Medium I want to get to 0. So you just add this internal extra bit. So I'm going go to set the margins to, down here, it's set to 5, but when I get up to Medium, not that one, that one, it goes back to its kind of standardized size. 

Then what I want to do, is when it gets to Large, maybe there, is to do something crazy. So margins on Large, I want to do negative 5. Crazy Dan, living life on the edge, there you go. So Small, or Extra Small, Small's the same, then it gets to Medium, and Medium changes back to 0, and when it gets to Large, boom. And because I haven't specified Extra Large, it flows through the Extra Large, starts from the center, Mobile First, out. Does that make sense? I hope it reiterates the whole Extra Small. It is that one, and then because I didn't change Small, it flows into this, there's no difference between these two Media Queries. I only changed it when it got to Medium, which is that guy there. Make this to 0. So two extra little bits is, if you leave-- if you don't put, like a-- you put the Property but don't put the sides, it assumes all four corners, and then you can kind of target for different Media Queries. 

Now the last thing I want to do before I move on is, I've been using row and column, in these Div Classes. Earlier on in the course we've worked out, remember, Header is really useful, Nav is really useful, Main section, Article, not so useful, but those are the specific HTML5 tags, that we should be using to mark up our documents, to make them good for screen readers, and the visually impaired, and so Google knows kind of what’s what. 

So let's say I want to make this my Header, because this is, all the Header stuff goes in this. It has my Logo in it, has my Navigation. It's normally what we put in the Header, but we've called it Container Fluid. What we can do is, we called it Div Container Fluid. Let's just not call it Div, let's call it Header, and down here you need to change the slash, '/', from Div to Header, so both the opening and the closing to Header. Nothing's really going to change on our site, let's have a look. Looks exactly the same as it did before, let me go back to 100%, but now it's kind of marked up correctly. 

Same with our Navigation, Navigation's in here, instead of calling it Div, I'm going to call it Nav. I've got to make sure I change the closing Nav. So this is how-- I kept it separate for this class just to make it nice and easy, but now that we're getting used to it, we're going to put in our right Containers, and everything specific for HTML5. So I need a Main Tag, I'm actually going to leave the Main Tag. The Header, the Navigation, the Footer, really clear and useful. There's Main1 in here, it's kind of useful, but you get the idea, right? You can just make sure you're using Nav Classes, so Header Class with the Container Fluid, or Div Class, it doesn't really matter, but we should be using our specific HTML5 markup. 

All right, that is it for this video, I'll see you in the next one.