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.