Hey there, my name is Dan  and in this video we're gonna look at Bootstrap components. Now we've been working hard on the fundamentals of Bootstrap  and Dreamweaver and it's taken us a while to get here. The nice thing about where we are at now is  that we can let Bootstrap make us look great. What I mean by that is that if you are pricing up a job  as a web designer and you were gonna explain to them  that it was gonna take you most to two days to get the fonts  to change color and all of 10 minutes to get the, uh,  tabbed menu to move across,  or a carousel to flick across, it'd be a hard job to sell. So what ends up happening is you actually do spend a long  time doing the basics,  but then it gets to this point here where we get  to do some really nice quick high value looking things,  but for us, they're actually quite easy to implement. And that's because Bootstrap has done all the hard work.

So let's look at a few of them. There are, there are loads more,  but we'll do a couple in this case  and we'll look at probably the most popular  one, which is the carousel. And the carousel is just a, a, a sliding image along,  generally used along the top of websites. So let's do it. Um, I'm gonna make a new page. So save, there's, I'm gonna call this one our maybe  photography page.

Great. Now make sure we change our document  title and our description. We're not gonna do it now 'cause I'm lazy,  but you should always go through new pages. Document title, meta description. The reason I'm not doing this is  'cause I'm, this is a throwaway page. I'm gonna bend this.

It's uh,  just gonna be a quick easy tutorial. So what I wanna do is clear out, uh,  this column that I was using. So there he is there. I want  to get rid of everything in the middle. So I'm gonna get my split view. I wanna leave the wraparound div  and I wanna get everything in the middle.

So I've left my, uh, column in there that's with a 12. And I'm gonna throw in a carousel in the middle here. Okay? So I can do it either way. Okay. I can have the com, the column selected,  or I can have my cursor flashing in between.

Now we're gonna go to our insert panel. We're gonna make sure we're on bootstrap components. And there's a few in here. Uh, let's look at a couple of them. Let's look at, let's start with the accordion. Where is he?

He is there, sorry, the carousel. So if I click carousel, I'm gonna, oh,  it's wrapping it around that. It's not what I want. I'm gonna  undo, I'm gonna click inside. I lied. Click inside and let's go to Carousel.

Great. And the beautiful bit is if I do a save all  and I preview of my browser, I now have a carousel. There he is there, which him I can click, he shuffles along. He's not particularly pretty,  but we can go through and edit that. There's no big problem at all. But that's how easy it is to get a carousel going.

And there's a bunch of other things  that we'll have a quick look at, like, uh, tabs  and decks, our tab menus and uh, Cordi menus. Um, and yeah, they're just built into Bootstrap. And what we need to do now is using our mad skills  with say the, uh, code navigator. We can go through and change the styling of these headings. We can remove them if we want to. Um, let's go and style this one just real basically  to show you how to get in there and do it.

Um, and Dreamweaver here, there's an image there. He is there, okay. And this is him here. He's being used over and over. So the same image, Okay? And what's happened is, uh,  Dreamweaver has sneakily copied him into  your images folder for you.

Um, just as a placeholder and we can go find him. Okay? So I'm gonna go to my desktop, go  to my images folder, and there he is. There's my carousel placeholder. So what I'm gonna do is open it up in  Photoshop and go and edit it. I've already done that.

Um, if you are new to Photoshop  and you need some skills like that, try out my other course. I've got another course for Photoshop for web design. Um, so I've got these images here. I've got these three little slider images. Now all we need to do in Dreamweaver is there's,  and looking at the code, let's go to full code view. I'm in source code, I'm in code view.

Let's have a look at what this carousel looks like. There he is there. So that's the beginning  and the top of it. So there's a couple of things. There is, the main ones we want are  these things called list box. Here.

There's one actually, sorry, these are items. So I've got, there's one, there's two and there's three. And there are images as part of all three of them. And you can see here, here's the H three,  which is the heading being used in the text. And you can see third slide capture  and you'll see them just here, these bits of text. So let's go and switch these out.

So this guy here, instead of carousel placeholder,  I'm gonna use my other image. Okay, in this case I've got slider one. Great. I'm gonna make sure I add alt text. So this is going to be my um,  Adobe CC  Training. Okay, let's do it to this one.

Second one down. Slide two, change the alt text. Slide three, Change the old text. I go through and change these bits of text as well. And say, first slide heading, let's call this one Adobe  Creative Cloud Training and say, I don't want this P tag. I'm gonna remove it off this one.

And let's say I'm gonna remove the text off these guys. I'm just grabbing, making sure I grab both the  opening and closing tag. And let's check it out in Drew Weaver. Great. And there's my Adobe CCC training. I can flick through these.

Okay, so you can see  how easy it is to customize. Now I've made these images, the width  of my, uh, desktop view. So you can see here and my desktop view 1200. And you can see down here, it's been all  grayed out and I can't see anything. It's because I'm in coat view. If I go back to live view, this thing  should spark back into life.

There he is there. Here's my large version  and I know that it's 1200. And the cool thing about uh,  bootstrap in using this carousel option is  that the images are already made responsive, which is,  so I drag 'em down, they shrink to fit the width  of my different sizes. Now, if I wanted to, I could go through  and start changing, uh, the styles for this. At the moment it says an H three, um,  and it is white with a drop shadow  and that it might work for me and,  and say, So let's say now that we want go through  and make some more adjustments, we've changed the image,  but we wanna go through and change, say some of the text  or say we wanna get rid of this gray. Can you see when I go back to live view, there's this kind  of gradient on the side here that maybe I don't want it.

Okay, I wanna get rid of that. So  what I can do is click in here, figure out what it's called. The easiest way to check it member is  to go to Code Navigator. So right click it, go to code  navigator, start at the bottom. It's not gonna be any things that I've done  with the main CSS. It's gonna start here.

So cover, what I'm looking  for is this thing here probably you can see  there's a word gradient in there. Okay, it felt like that's controlling it. I'm gonna click on it, it's gonna show me in my CSS. There it is there. And I'm going to copy it  and I'm going to jump it into my CS S's. Go right down the bottom.

Actually remember we've got, um,  our extra large desktop view, tablet view, mobile view. I want it to be what's considered global. So it's gonna apply to all the different views. And I'm going to go in here and go to my CSS designer. Click back in sometimes click back over  here and there it is. Consider carousel control, left click show.

All, all you can see there's a gradient going on. What I'd like to do is instead of a gradient,  I'm gonna click this one here  and I'm gonna make that completely opaque as well. So it's got a gradient, but it goes from  transparent to transparent. I'm gonna do a save all file, save all  and jump into my browser. And you can see here this left hand  side, the tag's still there. I haven't messed around with it, but  you can see it's actually gone.

So it's over here, but not over this side. And you'll do this for these little arrows here. You'll do this for the text  and you can go through and customize it. Great. So that's how to get a carousel going. Now the next thing, let's go  and have a look at some of the other ones real quick.

So I'm gonna go back to my live view. I'm gonna scroll down here. I'll use this bit down here. I'm just drawing this page. Really. I'm not too worried 'cause it's not gonna be part  of my long term, um, design.

So I've got my row and I've got a column inside there. Let's have a look at this rose here. Let's go back to source code. So I've got two columns in here  And he starts there and where's the other guy? Both of them. So I'm gonna get rid of everything  inside there.

So I'm gonna get one column and it's only spanning four. You'll see where is he there? I need to get him to go 12. He's hiding in mobile. That's still okay, great. Put a few returns in  and I'm gonna chuck in a couple of the other little parts.

So let's go to insert, let's go to bootstrap components  and let's have a look at some of the other easy ones  that are quite useful tabs. If I click on this one here,  it's chucked in a bunch of tabs. Let's have a look at our preview. And you can see here tab one, tab two  and the content's changing down here. Now all I need to do now is start adding content  so I can start adding this and changing, changing this. And I can add loads to this.

You can see it says changing this,  but you can add images, you can add other  columns to these tabs. I'll show you what I've done on some of my sites. So this one here, the same typed uh, tab interface. You can see there's overview dates, outline, testimonials,  and this is the same tab thing we're looking at in  Dreamweaver right now, but this one's had  a lot more styling done to it. We've moved it to the right. There is a bunch of text  and rows and columns inside of here,  but essentially it's the same thing.

The nice thing about using Bootstrap to get started is  that we know that it's gonna work on older browsers. Um, and it's gonna resize nicely  on different mobile devices. Um, one of the other ones we might look at real quick is  some of the Let's  undo so undone. And let's go to one of the accordion ones. This is the last one we'll do and let's save it  and check it out in the browser back to here. Um, you can see here it's the wrong colors at the moment  for my website, but that's okay.

You can see, um, it's a way of kind  of like grouping these little accordion things. Now I've used them a few times at different sites. The moment on my Irish site, if you go to FAQ,  you can see just a nice way of  Grouping the top level questions down  and people being able to open it up  and go to the different options  or the answers to the questions. Now how to know what other components there are. There's most of them are built into Dreamweaver. You can see them on this right hand side here.

Under components you'll find a few of them under snippets. Okay? You might have to hack around  and find them in snippets,  but, um, a nice way  to find them all is on the Bootstrap website. So bootstrap, uh, get bootstrap.com is the kind of home base  for where Bootstrap came from. And you can go things like components  and it will list out lots of different things. It does.

You can see there's a menu on the side  explaining the different parts. And there is another one on a JavaScript  and that will do a similar type of thing  where you can see there's our dropdown menus. There's the carousel that we did. Okay? And if you find anything else in here  that's not into Dreamweaver, you'll have  to follow the example of copy  and pasting bits of code into the head. Some controls, some of them are easy, some of 'em are hard.

It's lovely when Dreamweaver does include them. And with the new updates, includes more and more,  but all the major ones are already there in Dreamweaver. Okay? They're all right. So that's how  to use the bootstrap components. It's the way to add really high value components  or options to your website,  but using the power of Bootstrap.

Love you bootstrap. All right, see you in the next video.