Skip to main content

How to use Bootstrap Layout Grid Experiment 1

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

Daniel Walter Scott

How to use Bootstrap Layout Grid Experiment 1

Lesson 103 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

103. How to use Bootstrap Layout Grid Experiment 1

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 use Bootstrap Layout Grid Experiment 1

Hi there in this video, we are going to look at bootstraps, lay out a little bit more. Okay, we're going to mock up this one here. It's going to turn into this over here. There's gonna be some key takeaways that we need to learn before we start building a big old website. Alright, let's jump in and learn how to do it. Alright. To get going with our first bootstrap layout kind of experiment, we're going to close down our kind of main site and create A bit of a throwaway file. So we're going to call this one layout a html. Let's add in our html stuff at the top. And remember we need to update this one here. Um you can always go back to the previous stuff we've done in your exercise files though in project for in your text document that I've made, there's a bunch of stuff in here to help us out. So this is the updated view ports. Okay, so up here remember it just has that extra shrink to fit equals No for Safari. And I've also put in there, what else have I put in here? The C. S. S. Now, ...

you should get this from get bootstrap in case things change, but I've got one in here for you and I remember going at the top, we're not going to put in all the javascript at the moment because we don't need it for the grid. Okay, It's just all those fancy kind of sliders and stuff and we are going to put in our own CSS and actually we might just be lazy in this case and just style it in this document instead of an external sheet. It still needs to be underneath this CSS. Okay, so we can still do it but it needs to be underneath it. All right, let's put in our container. Okay, So in here we're gonna put in dot container. Okay. And inside of it we're just going to put stuff because I want to have a quick little preview. Make sure it's all working. Bootstraps connected. Okay, so I'm going to turn it off, turn it on again. I'm gonna load a different document on different screen. You can kind of see it's working because I know it's centered it's centered on the slide screen. There's a big gap over here that's one of the perks of using bootstrap but we've already learned that one. So let's delete the text in there and we've proved it works. We're gonna put in our top part So our mock up here you would have seen at the beginning is in your project for Okay. It is called wireframe. Okay. That's what we're gonna be building in this case. This bootstrap layout a we're going to put a 5050 split of the logo and nav there's going to be a box at 100 and then there's going to be three boxes down here. So let's put in this first to the logo and the Nav. So the way it works is Rose and containers. You can't ever skip the row. Okay so dot ro Okay and inside of that you put your two columns. Remember the row name is the thing that gives the columns there flex box power and it's a nice wrapper for them so that they don't break into other parts or other rows or connect up. So I want column. Okay but I want times two of them awesome. So now we put our text and this one is going to be the logo and this one is going to be the nav awesome. Let's have a little look and it's split them off nicely. Now let's say I want to add some color to these boxes. Okay this is going to bring up a really good point and a really good explanation of how to use Bootstrap is we shouldn't just rely on the coal the coal you should use as a rapper and you shouldn't start styling it. If I start adding padding to the coal and and doing background colors probably won't hurt it. But there are lots of things that will this little thing here. Don't try and override. Just let bootstrap control that one And inside of these fellas add your own class. So you're going to have like triple nested thing. Okay so inside of coal here we're going to put in our own class. Okay I'm going to give it a name of my box now you'll see now actually I'll put that down on its own line and we'll do it for two of them in a row, command option down arrow or control down arrow to get two of them. Okay. And I'm gonna put in actually put it in return and then I'll put in my box okay. I call things my box or my anything when I'm dealing with Bootstrap because there are like, if I want to do a column, I'd call it my coal just in case because Bootstrap has a bunch of stuff that's already named a whole lot of classes and you're like, if you start being clever like calling something bold, you're liable to override or start messing with one of bootstraps classes. So I always put mine in the front of it so I know which ones are mine and which ones are theirs? They've got no class. That starts with my in bootstrap. So it just means that I'm safe because I've been styling things and it's not working. You're like, why aren't you working? And then you find out Bootstrap got something called exactly the same. Trying to do a different thing now inside of these. This is where I can start doing my stuff. Okay, so multi curses. I'm using the old key or option key on a Mac or a Pc to click twice and I don't want to do that, do I? I don't want to go and never. Okay, so logo nav, let's have a little look now. It's gonna look the same. Okay, but now I can go off and start styling my box. Okay, so up here in my little styles thing here, I'm gonna say dot my box, it's going to let's just add some basic stuff to it. Let's add a background color so we can see Okay, has to be lower case background call background cole you can smash in any kind of letters there and predictors pretty good. We're gonna use hot pink to match our little mock up there. We'll add some padding to it. Just well it's a minimum height as well And in the heights with 200 pixels. I still got my creaky voice started way too early this morning and coffee is not even helping. So we're going to imagine, we'll do top and bottom of about 20 pixels just to push them apart so there's a bit of white gap between them. Okay. And we'll do top and bottom of 10 pixels. Let's have a little look how we're going looking good. Maybe some padding on the inside of these guys. Okay, so a little bit of padding all the way around of about 20 pixels. Alright. And just I only adding this stuff here. It doesn't need to be there at all. Okay, I just want to show you what to do if you do want to style the columns. Don't actually style the columns, You could put dot com up here and start messing with it and it will fall apart and we're adding it so that we can actually see it rather than just kind of like me say, don't worry, it's there. Trust me. Alright, next thing I want to do is where's my mock up? Okay, I want this big hero box in the middle. This brings up another good bootstrap strangeness. Okay, what I'm going to do is put a few returns here, just so that I'm really clear about kind of the outside wrapper and all these internal ones. So I want one line, I can't just put in a call okay, and start styling that it needs to go inside of a row, even if you just need one of them. Okay, because remember the row rapper gives the coal its superpowers okay, with its flex boxy goodness. Plus otherwise these guys, if I put another coal underneath, they're gonna start rolling together and all try and squeeze onto the same line. So our roads kind of like a line break as well. So in this case it's going to be my hero box. Let's have a little look, it's not going to work well, it's kind of going to work. I want to put in that div on the inside. Okay, so in here I'm going to have one called my box and in here I'll call this one hero box Nice. Alright, the last part of our mock up is let's have a look at him. It's 123 kind of all across evenly spaced. Okay, this is a nice, easy one to get a start with in bootstrap. Alright, so we're going to do a row but let's do some fancy. Let's go. Let's do some stuff. A row inside of it. That little less greater than Okay. Um, inside of that. I want a child of coal. How many do I want? I want three of them. Cool. Right, one row, three columns. And this is going to be feature 1, 2 and 3, 2 and three. Have a little look at what we got going kind of forget every time. Okay, let's delete, let's get rid of that stuff and let's say I want to put in my dot my box And then I want times that by three, that's not what I want to do. I'm just not thinking. It's early. Let's say I want to do it all in one go. You're like, show me how you do it all in one go can do. So let's get rid of that as well. Okay, so we want to row with inside of that row. Okay, we want to put a coal inside of that call. We want to put in my box. But I want three of them. But if I just do it like that, it's going to kind of give me a hard kind of what I want. Okay, so what I want to do is wrap this part in brackets. Okay, so that predictive and tries to put in their closing bracket as well. So I want all of this Wrapped up together and then times it by three. Sometimes you got to kind of start again. There you go, fancy. Alright. I'm gonna put in my flashing cursor here and we're going to do feature and we'll do feature command feature one, two and three. Let's have a little look nailed it. There you go. There's our mock up, that's it in Bootstrap. Super easy. But the takeaways for this one is making sure okay, you use Rose even if you want to use just lines by itself. Okay. Just one old column all stretching all the way across the other takeaway is to make sure you don't style the row or the column or the container. Okay. It's best to add your own classes to it and let it do its thing. I could start the container here, but it might be nicer to add a second class called my container. Okay. Or something else, whatever you wanna call it. So there's two things applying. You're not trying to mess with that one. They're all kind of Yeah, it's just a good general rule for bootstrap and why do we like it? A it's done the flex box stuff for us and it's added media queries for us and it breaks down nicely. Okay. To smaller devices and let's go right click inspect and see what it does at mobile. By default, let's make sure your device preview little toggle switches on. Okay. And I'm gonna go down to iphone X and it breaks down nicely. Alright. That is our first experiment done. Let's move on to 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