Lessons

Lesson Info

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

Hi there. This video we're going to talk about spacing in bootstrap. Okay. 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 or padding T for top. B for bottom. Ah It's very good. Let's work out how to apply it. Now in bootstrap. Alright. In this video I wanted to start working with padding and margin in the bootstrap way. It does it let's say I want to add a nice big white gap between the gray 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 All right. I want to take the container container fluid. Okay. And I want to give it a margin at the bottom margin bottom of X Y Z maybe 20 pixels. Okay. So that's that way. It still works. Totally works. Okay. But what we're going to do is use the bootstrap way and let me show you the documentation. So at get bootstrap dot com. Ok...

ay. 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 all right. Instead of writing margin, you just type in em and for padding his p Okay then for the different sides, you've got top, bottom, left and right shortened to TB L R if you want to do X K. Which is left and right at the same time or top and bottom is why at the same time now in terms of the sizing is you've got you've got kind of five options. Six options 012345. 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. Okay it's a predefined one. So margin we're gonna do bottom so B hyphen and then the size we're gonna do the maximum of five and we're gonna go preview it in the browser hopefully and you can see margin bottom has been extended out by five and you're like what is 5? Okay. Basically they use the spacing of ems. Okay so we know that by default the M. Is about 16 pixels so if you use three that's using one whole m okay so remember the default font size is 16 pixels if somebody goes into chrome and in their browser and adjusts it These sizes are going to adjust as well. five is the biggest and some of these smaller ones sets to zero obviously but you will find some of the components. Remember our kind of caress cells and cards we made earlier? They will have some by default. The default will always be three in bootstrap so if you find a component that's got margins or padding already added it's three. So if I put in one Okay. On top of something that already exists in bootstrap is actually going to cut it down by 25% Or to 25% of that kind of default spacer which is the 16 pixels makes sense if you're adding it by yourself, anything above zero, okay, It's going to be bigger but if you find something that already has margin applied okay. And you are you add three? Actually nothing's going to happen. It's just gonna be the same if I go to it's going to be slightly smaller. Four is gonna be slightly bigger. One of the troubles though, troubles for me I guess doesn't happen very often but there's no six, you know like like 10. You can adjust the spacings to add more measurements but you need to get into the sass file that is used in Bootstrap, it's a 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. Okay. 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 plane or CSS Okay. This stuff here just real basic markup into actual programmable CSS so it gets a bit more nerdy but if you want to get down that rabbit hole you can go check out. I've got of course was not of course a video that I did for adobe. They commissioned me to make one. And if you go to their help ex dot adobe dot com. And search from my name and pre processor. This will turn up and I spend some time going through it here. If you want to catch up either put a link to it in your exercise files as well. Under project for 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. Alright, let's now add our three feature boxes and add some padding and margins to them. So I wanted to be inside the container. Okay, so my fluid container ends there. This container. I wanted to be inside of it because I wanted to kind of be centered. Okay, so I'm going to have a rope and inside of that row, I'm going to have a column inside of that column. I'm going to have my my box Only three of them. Actually I need to put these in brackets. Thank you. Code helping. And I want three of them. All right inside of these people. Okay, I'm going to say I would like feature one two and three. Alright, let's have a little look how'd that go. Okay, so I've got them here. It's not called my boxes. My box one. Alright, 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 for one of them. I might as well do it to the row that it's in. Okay. So the row I'm going to say I want to padding or margin. It's not going to matter in this case. Okay. Because there's no color on the row. So I could use padding bottom or margin bottom and I'm going to use the nice big five. Have a look. 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 smaller. A bit bigger. Okay, because just a bit too small either side. So, these nest boxes are called my box one of my box too. 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 three. Okay, I'll do it for both of them. Mx A mix three. Surprisingly hard to type when you can't see the keyboard. I should show you my big microphones in the way. All right, let's have a look. There you go. Three is not enough. It's the same as the default. Come on Down five. There you go. Way too big for all right. 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. Okay but we'll show it to you anyway. Let's say we want to have a negative margin on this nest box here. Okay so next one. Okay I'm going to get rid of the MX five. I'm going to say I would like a margin, let's say it's a margin of five. Okay. Which is going to make it a lot smaller. Okay, can you imagine on the outside pushing it in? Okay, a 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 an N in front of the five which means it's a negative. Okay so that's the kind of basic syntax for spacing. Let's have a look. Mm P K T B L R X Y. Okay. For the different sizes size ing's and there's some other stuff to read through into here. Okay but that's it for the moment. Alright I lied there are two more things I want to cover. One is the media queries. Okay so at the moment we'll be doing the property which is the either the marginal petting then you add the sides. Okay which is top bottom left or right and then the breakpoint. Okay then the size. So we're gonna add this breakpoint which we haven't before. Okay so just means our media queries. Remember working with our document here, I'm gonna go to inspect. Gonna turn on the um device preview and remember these are the breakpoints that's extra large large. Medium small. And there is no media query for extra small. It just assumes there's something called mobile first. It just assumes everything that doesn't get specified, assumes it is this X. S. 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. Five with no like top or bottom or X. And y. It assumes all four corners. Okay so that's the other thing I wanted to cover. So let's say I want a margin of five around it. Let's have a little look. So there's a margin of five at all. Breakpoints okay 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 zero. Okay but I don't want to put the zero and I want to say when it gets to medium I want to get to zero. Okay so you just add this internal extra bit. Okay so I'm gonna ask the margins to down here. Okay it's 8-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. Okay, I want to do -5. Crazy dan living life on the edge. There you go. So small or extra small smells the same. Okay. That gets the medium and medium changes to back to zero and when it gets to large. Boom and because I haven't specified extra large, it flows through the extra large. So it starts from the center mobile first out, does that make sense? I hope it reiterates the whole extra small. 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 I got to a medium which is that guy there many goes to zero. Alright, so two extra little bits is if you leave, if you don't put it like a put the property but you 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. Okay, so in these div classes. So earlier on in the course we've worked out. Remember hitter is really useful. Nav is really useful. Main section article Not so useful but you know, those are the specific html five 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 head of stuff goes in. This has my logo in it has my navigation. It's normally what we put in the header but we've called it con container fluid. What we can do is we called it Div container fluid. Let's just not call it diV Okay, let's call it header. Okay. And down here you need to change the forward slash the slash from active to header so both the opening and the closing two header, nothing's really gonna change on our site. Let's have a look. It looks exactly the same as it did before. I'm gonna go back to but now it's kind of marked up correctly. Same with our navigation, navigation is in here instead of calling it Div. Okay, I'm going to call it NEV got to make sure I've changed the closing NEV 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 gonna put in our right containers and everything is specific for HTML five. So I need a main tag. I'm actually gonna leave the main tag, the header, the navigation, the footer. Really clear and useful. There's main one in here. It's kind of useful, but you get the idea right. You can just make sure you're using Nav classes, so hit a class with the container fluid or div class. It doesn't really matter. But we should be using our specific HTML five markup. Alright. That is it for this video. I'll see you in the next one.