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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

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

2,000+ classes ranging from fundamentals to advanced techniques.

Quick overview of how Bootstrap Components works in VS Code

Quick overview of how Bootstrap Components works in VS Code

Lesson Info

100. Quick overview of how Bootstrap Components works in VS Code

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

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

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks