How to add padding & margins using Bootstrap 4 in VS Code
Daniel Walter Scott
Lesson Info
106. How to add padding & margins using Bootstrap 4 in VS Code
Lessons
How This Class is Structured
01:41 2What to Download
02:57 3Creating Our First Webpage
05:55 4What is HTML5 & CSS3
08:24 5Head vs. Body vs. Html Tag
09:01 6Title & Description
05:54What Code Editor Should I Use
02:42 8Using Diy Tags
06:26 9What is a CSS Class
09:05 10How to Create Nested Divs
05:03 11Class Project
05:24 12External CSS
09:07 13Creating Our Index Style Pages
12:16 14Testing Your Website
08:47 15Check Your Code For Errors
11:01 16What are HTML5 Structure Tags
05:47 17Add HTML5 structure elements
16:02 18How to Set the Color of the Background
05:10 19Adding Images to a Website
04:38 20How to Center an Image
01:14 21Change the Font Size & Color
14:11 22Make a Clickable Link
08:45 23Stretching Background Image
05:38 24Making a Div Tag Transparent
02:36 25Simple Website Text Navigation
06:43 26CSS Compound Classes
07:02 27Class Project 02
02:05 28Class Project 02 - COMPLETE
04:48 29Add an Email Button to a Website
03:49 30Add Google Maps to Your Website
11:25 31Making a Website Live
16:50 32Uploading via SFTP
11:50 33Setting Up Our New Project
03:46 34CSS Reset
15:22 35Min-height vs. Height
07:01 36Div Tags Onto One Line
05:23 37Getting div tags onto one line using Flexbox in HTML & CSS
05:23 38Evenly Spaced Div Tags
04:42 39Two Div Tags of Different Sizes
07:13 40Vertically Center Content
07:20 41Class Project 3
02:51 42Class Project 3 - COMPLETE
05:39 43Change Default Fonts
04:19 44Installing Google Fonts
12:44 45What are PX & EM & REM
14:56 46Change Line Height
04:33 47SVG vs. JPG vs. PNG
07:04 48How to Create a SVG, JPG, or PNG
11:00 49Block Images vs. Background Images
08:32 50Finishing Up Our Cards
09:10 51Icons via Font Awesome
16:31 52Making a Div Container Clickable
09:55 53Box-sizing & Border-box
06:19 54How to Make A Colored Button
07:46 55Why Can't I Add Margin or Paddding
11:08 56Rounded Corners
04:17 57Drop Shadows
06:24 58Backup Your Website
05:00 59Reusing a Button Class
03:10 60Class Project 04
02:58 61Class Project 04 -COMPLETE
05:45 62Adding a Horizontal Rule
03:51 63Make Divs Wrap Onto Separate Lines
12:14 64Hover Color & Animating a Button
03:33 65Pseudo Classes
09:31 66Simple Dropdown Navigation
20:04 67Adding Our Dropdown to the Website
14:50 68Useful Shortcuts and Tips in VS Code
13:28 69Large Background Image
09:24 70How to Connect 2 Pages
10:42 71Simple PHP Form Work
17:49 72Placeholder Form Text
05:46 73Multi Line Form Text Box
02:18 74Form Check Marks
03:04 75Form Radio Button
06:07 76Form Drop Down Menu
05:48 77How to Style Your Form
12:55 78What does responsive website design mean
04:17 79How to change a website layout size color when at different sizes using media queries
11:28 80How to test your website on a tablet or mobile phone from Visual Studio Code
06:00 81How to change the layout of a responsive website for mobile vs desktop
16:02 82How to turn things on and off for mobile tablet & desktop responsive websites
06:03 83What is pixel density responsive images pixel ratio dp px in webdesign
14:47 84How to export responsive images for website from XD Photoshop Illustrator
05:11 85How to add responsive images to website using 100% width in HTML & CSS
06:08 86How to use srcset to change images in HTML for responsive website
10:15 87How to add a css style to the first line of a p tag on a website (
11:18 88How to make the header footer full width but the inside centered
05:36 89Class Project 05 – Header design
03:12 90Class Project 05 – Header design COMPLETE
06:25 91How to use a span tag or span class in HTML to change text
10:32 92How to pin the navigation to the top of a website fixed nav
03:17 93How to make a simple responsive mobile menu using CSS only
08:21 94What is Javascript vs Jquery in website web design
06:35 95How to make a burger menu 3 line mobile navigation for a website
15:11 96How to switch a menu nav from desktop to mobile phone
21:45 97Overview of what Bootstrap 4 is in website design
07:57 98How to install Bootstrap 4 on a website using Visual Studio Code
06:27 99Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49 100Quick overview of how Bootstrap Components works in VS Code
09:23 101Quick overview of how Bootstrap CSS Styles works in VS Code
08:20 102How to customize the default Bootstrap 4 css styles
13:51 103How to use Bootstrap Layout Grid Experiment 1
10:20 104How to make 100% header & uneven widths in Bootstrap 4
07:16 105How to create uneven col widths in Bootstrap 4
07:27 106How to add padding & margins using Bootstrap 4 in VS Code
12:03 107How to change layout of Bootstrap depending on mobile or desktop
15:46 108How to turn things on & off on your website using Bootstrap 4
05:30 109Google Chrome Inspect
12:40 110Add Shadows to Text & Boxes
07:06 111Change the Default Buttons
06:16 112Responsive Images in Bootstrap 4
09:34 113How to Center Text & Div Tags
04:16 114Customize the Bootstrap Navbar
07:29 115Add Your Own Logo
03:58 116Change the Default Nav Styles
12:12 117Fix the Navigation to the Top
04:41 118Col Images & Col Background
07:56 119Bootstrap Border & Rounded Corners
04:20 120Bootstrap 4 Carousels
05:13 121Card Groups
03:29 122Drop Shadows On Bootstrap Cards
02:25 123Clickable Boxes in Bootstrap 4
04:02 124Final Quiz
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.
Class Materials
Ratings and Reviews
Viwosoft Technologies
Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!
Student Work
Related Classes
Branding