How to add Bootstrap components to a web page design using Dreamweaver?

Hey there, my name is Dan. In this video we're going to look at Bootstrap components. We've been working hard on 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 now if you're pricing up a job as a Web Designer, and you're going to explain to them that it was going to take you most of two days to get the fonts to change color, and all of 10 minutes to get the tabbed menu to move across, or a Carousel to fit across, it will be a hard job to sell. 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 loads more, but we'll do a couple in this case. We'll look at probably the most popular one which is the Carousel. The Carousel's just a sliding image generally used along the top of websites. So let's do it. I'm going to make a new page. So 'Save As', I'm going to call this one, maybe 'Photography-page'. I'll make sure we change our Document Title, and our Description. We're not going to do it now because I'm lazy. But you should always go through, 'New Pages', 'Document Title', 'Meta Description'. The only reason I'm not doing is because this is a throw away page. I'm going to bin this. This is going to be a quick, easy tutorial.

So what I'm going to do is, clear this column that I was using. So there he is there, I want to get rid of everything in the middle. So I'm going to go to Split view. Want to leave the wrap around div. I don't want to get everything in the middle. So I've left my Column in there, width 12. And I'm going to throw in a Carousel in the middle here. I can do either way. I can have the Column selected, or I can have my cursor flashing in between. Now we're going to go to our Insert panel, we're going to make sure we're on Bootstrap components. And there's a few in here, let's look at a couple of them. Let's start with the Accordion, where is he, he is there, sorry, the Carousel.

So I click 'Carousel'. It's wrapping it around that, it's not what I want, I'm going to 'undo'. Click inside, and let's go to 'Carousel'. The beautiful bit is, if I do a 'Save All', and I preview on my browser, I now have a Carousel, there he is there. I can click, he shuffles along. Not particularly pretty, but we can go through and edit that. That's not a 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 Tab Index, or Tab Menus, and Accordion menus. And here, that's built into Bootstrap.

What we need to do now is, using our mad skills with the Code Navigator, we can go through and change the styling of these Headings. We can remove them if we want to. Let's go and style this one, just real basically, to show you how to get in there and do it. In Dreamweaver here, there's an image. He's being used over and over, that same image. What's happened is, Dreamweaver has sneakily copied him into your Images folder for you. Just as a place holder. We can go find him. So I'm going to go to 'Desktop', 'Images' folder. And there he is there, there's my Carousel place holder. So what I'm going to do is open up Photoshop, and go edit it. I've already done that, if you're 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.

There are all these images here, I've got these three slider images. Now, all you need to do in Dreamweaver is-- 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. 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 'listbox' here. Actually, sorry, these Items. So I've got. there's one, two, and there's three. And there are images as part of all three of them. And you can see here, he's the H3 which is the Heading being used in the text. And you can see Third Slide Caption. You'll see them just here, these bits of text.

Let's go switch these out, so this guy here, instead of Carousel Place Holder, I'm going to use my other image, in this case, I've got Slider1. I'm going to make sure I add alt text. So this is going to be 'Adobe CC Training'. Do this one, second one down, Slide 2. Change the alt text, Slide 3. Change the alt text. I go through and change the bits of text as well. And say, for Slider Heading let's call this one 'Adobe Creative Cloud Training'. Inside, I don't want this p-tag, I'm going to remove it off this one. And let's say I'm going to remove the text of these guys. I'm just grabbing, making sure I grab both the opening and closing tag. And let's check it out in Dreamweaver. There's my Adobe CC Training. I can flick through these. You can see how easy it is to customize.

Now I've made these images, the width of my Desktop view. So you can see here, my Desktop view is 1200. You'll see down here, it's all grayed out, I can't see anything. It's because I'm in Code view. If I go back to Live view, this thing should spark back to life. There he is there. Here's my Large version, and I know that's 1200. The cool thing about Bootstrap in using this Carousel option is that the images are already made responsive, watch this. If I drag him down, they shrink to fit the width of my different sizes. Now if I wanted to, I can go through and start changing the Styles for this. At the moment, it says it's H3, and it is white. The Drop Shadow, done all that work for me.

Let's say, now we want to go through, and make some more adjustments. We've changed the image but we want to go through and change some of the text, or say I want to get rid of this gray-- can you see, when I go to Live view, there's this kind of gradient on the side here. Maybe I don't want it, I want to get rid of that. What I can do is, click in here, figure out what it's called. Easiest way to check it, remember, is to go to Code Navigator. So right click it, go to Code Navigator, it's right at the bottom. It's not going to do anything to things I've done with the Main CSS. It's going to start here, so Cover-- what I'm looking for is this thing here probably. You can see there’s a little gradient in there. That's controlling it, I'm going to click on it. It's going to show me, in my css, there it is there. And I'm going to copy it. And I'm going to dump it into my css, go right down the bottom. Remember, we've got our Extra Large, Desktop view, Tablet view, Mobile view. I want it to be what's considered Global, so it's going to 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. 'carousel-control left'.

You can see, there's a grading going on. What I'd like to do is, instead of a gradient, I'm going to click this one here, and I'm going to make that completely opaque as well. It's got a gradient, but it goes from transparent to transparent. I'm going to do 'File', 'Save All'. And jump into my browser. You can see here, this left hand side div-tag is still there, I haven't messed around with it. But you can see, it's actually gone. It's over here, but not over the 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. So that's how to get a Carousel going.

The next thing, let's go and have a look at some of the other ones real quick. So I'm going to go back to Live view, I'm going to scroll down here. I'll use this bit down here, I'm just drawing this page really. I'm not too worried because it's not going to be part of my long term design. So I've got my Row, and I've got a Column inside there. Let's have a look at these rows here. Go back to 'Source Code'. I've got two columns in here. He starts there, where's the other guy? Both of them. I'll get rid of everything inside there. So when I go to one column, and it's only spanning four. You see, there, I need to get him to go '12'. It's hiding in Mobile, that's still okay. Put a few returns in. And I'm going to chuck in a couple of the other little parts. So let's go to 'Insert', 'Bootstrap Components'.

Let's have a look at some of the easy ones that are quite useful tabs. If I click on this one here, chucked in a bunch of tabs, let's have a look at our preview. And you can see here, Tab 1, Tab 2, and the contents changing down here. All I need to do now is start adding content. I'm going to 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 Tab Interface. You can see this 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 going to work on all the browsers, and it's going to re-size nicely on different mobile devices.

What are 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. Let's save it, and check it out in the browser. You can see there, it's all colors at the moment from my website but that's okay. You can see, it's a way of kind of grouping these little things. Now, I've used them a few times at different sites. At the moment, on my Irish site, if you go to FAQ, you can see just a nice way of grouping that top level questions down. It will be 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? Most of them are built into Dreamweaver. You can see on the right hand side, here, under Components. You'll find a few of them under Snippets. You might have to hack around, and find them in Snippets. But a nice way to find them all is on the Bootstrap website. So getbootstrap.com is the kind of home base where Bootstrap came from. And you can go to 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 under Javascript. And that will do a similar type of thing where, you can see, there's our drop-down menus. There's that Carousel that we did. And if you find anything else in here, that is not under Dreamweaver, you'll have to follow the example of copying and pasting bits of code into the head.

Some controls, some of them are easy, some of them 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. So that's how to use the Bootstrap components. 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.