Skip to main content

Quick overview of how Bootstrap Components works in VS Code

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

Daniel Walter Scott

Quick overview of how Bootstrap Components works in VS Code

Lesson 100 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 2000+ more >

Lesson Info

100. Quick overview of how Bootstrap Components works 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

Quick overview of how Bootstrap Components works in VS Code

Hi there in this video, we are going to look at an overview of bootstraps components. The most exciting parts of bootstrap. Watch sliders move. I look at this, we've got a really easy jumbotron, drop down menus, the menu changes to mobile when it's smaller. We've got these cards going and literally we do this in this video, look at the length of it, it's kind of about what, 12 minutes I'm guessing. And we've done all of this real quick components are amazing. Let's jump in and get working. Okay. We are finished with our overview of layout. Let's close it down. Let's go back to the index page and what we're gonna do is we're gonna throw in everything. We're going to get rid of our H1 and we're going to throw in all the components that we are going to use to build out our project. For the first thing I want to do though is add our container. So let's go dot container member has to be spelled exactly right so that it matches bootstraps kind of use of container and inside of this. We're go...

nna throw in our components. Now we're talking about components briefly that there are things like image sliders and navigations. Let's have a little look at where to get them from. So in bootstrap, we're going to go to documentation, We're going to spend a lot of this kind of section of the course and we kind of looked at layout. Okay, We looked at components. Next. So click on that, there's lots in here, exciting cool stuff and we're not gonna go through each of them right now. We're just throwing the stuff that we're going to use. We're going to start with a knave bar, not knaves, knaves bar. Okay. And then here basically you can scroll down and just look for the one you want. Okay. That one has. I think it's the kitchen sink version. It's got every single thing. Okay. Lots of different options. Just with text. Just with navigation. We'll grab the kitchen sink version right at the top here. Okay, so it's the first one. So just underneath here let's grab this click copy. There's a bit of code that goes on in the html. But watch this. Let's go to V. S. Code inside of a container. Let's paste it. Let's save it, preview it in a browser, turn it off, turn it back on again. Let's have a little look and look at that. We have got a navigation and a drop. Remember we had to make a navigation. Okay? There's a search bar that doesn't work. Okay. Button with Hovers, all this stuff is just ready to go now in your html. We're not gonna do it exactly all now but you can go through and say instead of the word home we can call this one the damn button. You can see we've got a damn button. We're gonna have to start messing with the layout. Okay? We're removing and adding things later on. But I guess I want to excite you with what bootstrap can do very quickly Now. The next thing we want to add is we want to add something that does the dropdown work in this one. It does because we haven't added in our index page. We did. That's why it's working. Okay. We remember we added this Js code here or this. Sorry. Um, yes, Javascript code in our little throwaway over you layout. We only added the CSS and we didn't put in the javascript this index page. If you are just following along with a throwaway file, you've got to make sure the CSS is in the head and all the javascript is in the bottom part here. That's why all these components are working. So that is my container. That is going to be my novel. I'm going to add a little bit of comments. This is the navigation. Cool. Next thing I want to add is going to be my carousel. Karros L was that close? Anyway, let's go and find the carousel. So if we want to carousel, we look under components and we find carousel. Okay, same sort of thing. Have a look through some of the examples. That one is just a plain old slider. This one has some arrows where you can click through it. Okay, and decide which one you want. Always got little buttons on here. Okay, This one's got texts and all. Okay, so decide on which one you want. I'm going to go for this first one because it matches my design. I'm gonna click copy of the code underneath. Okay. And then just paste it into this code you like? It can't be that easy again. Yes, it is. Friends. What kind of it's it's looking for images. Okay, a bunch of images that aren't there? So we're gonna grab some images from our exercise files and throw them in. Okay, So we're gonna go to exercise files, we're gonna look at project for now, our little yogurt project. Okay. And images instead of copying them all over one x one, as we've been working and you're like why doesn't he just copy them all over at a single go. That's what I'm going to do now. I'm gonna grab the images folder and copy that. Okay, go to my desktop, find my project for I'm going to paste it in here. The whole thing, all the images for the project. Okay. And so now what we can say instead of loading this image called dot dot dot we're gonna say images and product one. I can't remember which one we want to be using. No yogurt one. So Yogurts one. Perfect. And let's do this. Actually we do both at the same time holding option on a mac. Here we go, holding option on the Mac and clicking twice on a pc. It is built to get the multiple cursor this type of images. We're gonna put Yogurt in twice. Change just 123 now, definitely go through and change your all text to describe the image. And let's have a little look now. Now. It's that easy wait for it. Does it have automatic scroll, wait for it? We're all waiting dan. There it is. There are little errors there, but they're white, you can't see them, we'll have to change the color of those. Can you see them flashing there? But you get what I mean? Look how cool that is an easy it was to implement, there's an auto timer going, it's j query goodness. Without us doing any J query. So basically it's a snippet of code we paste in and we can edit later on with our Mad CSS and html skills. Making us look super good. Super quickly. Alright, next one above the carousel. Forgot I want the jumbotron. Okay, so just above it, I'm going to put in my CSS and you're like the what? The jumbotron not being from America, I had to google where the jumbotron was and makes perfect sense now. Okay, that's a big giant billboard that goes in the middle. So let's have a look for jumbotron. It's your like hero image. It's your welcome to the world. Here's what we do Buy our stuff. Okay, so find the one that works for you. This top Winners. Okay. I'm going to copy it and paste it jumbotrons in. You can see H one, I don't know how to do that. There's some classes that are special for Bootstrap, which we'll learn as we go. But the cool thing about them is when they've been implemented, let's have a little look, you can see it is nice, the buttons are nice, there's a nice little hover there and when I break it down to get smaller, okay, it breaks down nicely. Oh and the most exciting, but I almost missed what's the navigation ready? You're like, oh that is way more easy than Dan's J. Query course video that he did, it's like 25 minutes long, but we need to know so that we can make adjustments and fix it if it's broke. And for the people there are lots of people who won't use bootstrap, you're like why wouldn't you? It's because I want to customize everything, but I do get excited at the stage when it's nice and easy and we start throwing things up and I'm like yeah, I should use bootstrap more. Alright, next project, definitely. Bootstrap, let's jump back into V. S. Code, let's say one more thing for this kind of like introduction, we're kind of half building the site. Okay, so I'm gonna add something called a card, okay, cards, plural in this case. Okay, and let's have a look, Bootstrap, I'm gonna make it bigger, we can see all the bits and I want to add one of these cards, okay think of them as tiles. Just nice and easy reusable thing and a copy of them and I'm gonna throw three of them in. Okay, return between them all. They're all doing something weird from my returns. I'm gonna make sure they all line up by selecting them, go to format selection. Nice. Let's have a look at the cards in our document down the bottom here, they're stacking on top of each other. The images are a little bit broken, we might as well switch them out right now. So in here while we're here, I am going to he's my multiple cursor, he's sick of me giving the shortcut now it is option on Mac on a pc. Kind of like it Yeah, make a dream of the shortcuts. All right then we'll change this one too two, three. Alright, let's have a look at it and you can start to see like our mock up is here. Okay, so navigation and some drop down. We're gonna make it simple, we're gonna it's easy to remove things, starting with the kitchen sink menu and kind of going paring it back. This is going to be my jumbotron, so I'm gonna have to style this quite heavily this, I'm going to make custom Okay, this thing here is my little slider thing goes left and right, okay, but you can see how quickly we implemented that and these little cards down the bottom, we've got them pretty close to start with. Okay, so bootstraps. Just a nice quick way of throwing together a site. So all of the kind of functionality is built in ready to go and you can just change it. Alright, components is probably the most exciting part of bootstrap. Okay. And we're not going to go through all of them now. Okay. But you can start having a little look through all the different things that you can implement. The cool thing about it is because they do the hard work, you can kind of sell it on to your client as a feature knowing that you can use bootstrap to do a lot of the hard work. All right, So that's the brief overview of Bootstraps components. Let's look at the last bit. So we've done an overview of the layout, then we looked at this overview of the components, we've got one more to go. We'll look at the styles

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