Skip to main content

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

Lesson 106 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

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

Lesson 106 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

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

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

Getting div tags onto one line using Flexbox in HTML & CSS

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

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

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final 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

Bonus Materials with Purchase

Exercise Files
Completed Files

Ratings and Reviews

Viwosoft Technologies
 

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

Student Work

RELATED ARTICLES

RELATED ARTICLES