How to add a Jumbotron Model using Bootstrap

 

Create Websites with Dreamweaver

 

Lesson Info

How to add a Jumbotron Model using Bootstrap

So I have the main part of everything designed. What I want to do is I'm going to add another jumbotron. And this is a jumbotron. It is. So I'm just going to go ahead and do this one. So we're going to wrap it up with this section. Our original design, we had our header, we had this section with all of our icons, and then we had a pink section and a white section and a tan section and the footer. So those other sections, the pink section, is this jumbotron. The next section, same jumbotron, different CSS. It's just white background. Next jumbotron, same jumbotron copied and pasted with a different color, with a tan background. And then the white one again, and then the footer. I don't think there's another white one. I think then it's just the footer. So I'm going to do this one jumbotron, and literally, you can just go in the code and copy and paste it. Or you can do it in the DOM. Just paste the same thing and just take… We're going to do… I'm breaking my rule. I'm going to call it .

pink because I'm not any cleverer than that. And I would just do a .tan one and a .white one, or .moreinformation or whatever purpose it is. So here I have my jumbotron. I'm going to get rid of this button because we're going to go ahead and install our own. I want the text. I'm going to go ahead and I'm going to leave the text in here, and I'm going to show you actually how to insert a button and stuff in here too since we're going to skip that other section. So I've got jumbotron. I'm going to go to CSS Designer, and I'm going to go ahead and make a new selector, and I'm going to call it .pink. And I'm going to come over here and I'm going to call it .pink. I'm going to apply it. And then over here in .pink… So I've got .pink and I'm going to come to the background color and I'm going to click on pink for my background color. So I've got a pink jumbotron. I can go ahead and I can add a cool title in here. I can select that. I could switch to Design View. I should be able to do that in Live View, it's just being fussy. Let's see. Grab it. Oh, it didn't stick. That might be why. Let's just go ahead and add the button. We want the button to go after this guy. I can insert a button from Bootstrap Components. If I come up here... Where's my buttons? There's buttons. So I click on Buttons, and I want a large button. So I'm just going to go ahead and click Large. And I want it to go after my paragraph, so I'm going to say After and it's going to put a large button in there. So now, I have all that stuff for the buttons, and I'm going to create button as a CSS, as a Selector, in my donut.CSS. So I'm going to click +.btn. And I'm going to go ahead and I'm going to change the background color. So the background color, this should be blue. And I'm going to change the text color. The font color should be tan. And I want everything in here to be centered. So this is pink. So I'm going to go into Pink and I'm going to say Text Center and now everything's centered inside of my jumbotron and it's looking pretty good. And I'm just going to cheat and I'm going to run out here and I'm going to look... Let's take a look at what we got in here. What was I doing? And this is how you work too. You constantly go back and forth to the design that you had in mind. Oh, that's all right. We don't need that. We don't need to fix all that stuff. So I had this pink area and I had the button down here, but because I'm going to skip that part, I wanted to show you how to add the button in there. The image that we are going to place in there, we can place our image in there the exact same way that we placed the images before. I would make a .floatleft and we can do all that fancy stuff in there. Let's see. What else do I want to show you? By the way, you can do a float right too. I know I've left the right side. I've totally ignored it, but you can do a .floatleft. Every time I create those floats, I create one for left and I create one for right just so I have them to call on whenever I need it. Let's create a Descendant Selector for this guy. I'm going to go back into Dreamweaver and I love my purple text but not so much inside of the pink box. So let's go ahead and get a little specific, and I'm going to go ahead and make a new Selector, and this is going to be .pink P. So if you are a paragraph inside of something called .pink, you should be a different color. Let's see. What is my brown color? We haven't used a brown color at all. Let's use that. I'm going to make this color #431a14. There we go. And now it's brown. And I could go ahead and change whatever I wanted to about that. So let's go ahead and see what this guy looks like. Looks pretty cool. You guys want to take a look and see what it looks like on the phone? Actually, you know what? This isn't centered. It's bugging me. Let me show you how to fix this real quick. If I can get this all the way over. See how it's off-center? It's no biggie. I think that's centered. And then we just save, and I think it's okay on all of them. And see, it just gets bigger as the screen gets smaller. It takes up more room. And then we can go into Chrome, resize. It still looks off-center. Actually, it's because my browser is off-center. That looks pretty good in there actually. Let's try again. Let's do…jump this way. There. That's better. So back in Dreamweaver, I'm going to go to my little world button. I'm going to click on my… I'm going to close up all these windows I have open for some reason. All right, click on my little QR Reader. And I clicked on that guy and... Come on. Come on. Come on. Come on. It's slow. There we go. And so that's what it looks like on the phone. So on my phone, everybody's in a single line, it looks pretty good, I got a button. If I turn it sideways, it still looks pretty good. And my menu works because I didn't mess it up because we do that automatically. So my little menu works. So just to show you, to create more jumbotrons in here... I can make that go away. I would come in to my Split View. I've got this jumbotron. So like I said, you can do this inside of the DOM. I got a pink jumbotron here. I can right-click and I can copy it. And then I can right-click and I could paste after. It's not a child. If it was a child, just so you guys know what this is, if it was a child, it would go inside of it. I don't want a child, I want it after. Insert After. But actually, that didn't work because it did not insert everything I wanted to. Okay, fine, so we'll do it the hard way. I can come into… I'm going to get rid of this. I don't need that. That's the stuff that I just put in there. Here's my jumbotron. But sometimes is easier if you select it. Oh, I selected the whole thing. So the good thing is now Dreamweaver selects the whole thing. So I can see the ending div. So I can grab that whole section. So from 100 to 110, I'm going to copy that into my clipboard. And then I want another one to go right after. And I'm going to paste. Don't you love it when it does that? Let's try that again. 100 to 109, right-click, copy, paste. So now, I have another jumbotron, but this jumbotron, I would just come into my CSS Designer and I'm going to… I can actually do it right in here. It doesn't exist, but I'm going to change this to tan. And when I do that, it brings this up. So I haven't showed you guys how to do this yet because sometimes it works and sometimes it doesn't. I don't want it to go into a media query, and I don't want it to go into navbar.css. I do want it to go into donuts.css. And if I hit Return... Yeah, see, sometimes this works. This thing is awkward. Did it work? Nope. So that's why I don't do it that way. So I'm going to do .tan. There it is. There it is. It did work. And then I can come into .tan and I can say Background Color, I'll make it the tan color. And then I would just go through and I would change the content in here. And again, if I wanted, I can keep on creating custom CSS for each section however I want. And then the footer, we would do the same thing in the footer that we did before. The one thing I did not show you how to do is make a link. So I'm just going to type in my email address, melissa@creative-training.com. Making links, adding images, all that stuff is pretty simple. So I've got that selected, and if I come down to my Properties panel... I don't even need to. Look, I got a little link button right there. Now, if I was just entering a link, I would enter the link. So if I was going to my website, I would do http:www.creative-training.com. But because this is an email link, I have to write in "mail to," M-A-I-L T-O:, and then my email address. And then it'll automatically open up. I have too many emails, sorry. There. Now, it'll automatically open up in an email. And then just like we styled the links earlier, we can style these links too. So we can create a regular link state, a visited link state, hover active focus, so we have different colors. And if you want different colored links in different sections, then you use your Descendant Selectors. So if the links inside of my pink are going to be different, I would put pink, space, a link to specify the link colors in there.

Class Description

Adobe recently announced significant changes to Dreamweaver, offering a brilliant new interface making websites easier to build–and more beautiful than ever before. Empowering non-technical users to build a website, this class you will teach you how to create a basic brochure-style website using Adobe Dreamweaver.


Adobe Certified Instructor Melissa Piccone shows you how to: 
  • Create a website from start to finish 
  • Apply web design best practices 
  • Understand Dreamweaver basics 
  • Customize Adobe Stock Templates 
  • Identify basic code to help troubleshoot 
Join us for this helpful class that will give you the tools you need to have your website up and running.


Software Used: Adobe Dreamweaver CC 2017

Reviews

lovemydreams
 

Great Class! Her teaching style is easy to follow and I feel like how excited she is about teaching Dreamweaver. I've taken other classes and by far Melissa class is worth taking because she loves creating websites. She shows coding and explains it in a way that if you are new to it you will understand. Learning Dreamweaver with Melissa is fun and worth it! Thanks, Melissa and creativelive!

Kathleen
 

I love this, she's great BUT...she's going wayyyyyyy too fast. I'm watching it live and working from scratch along with her but I can not keep up and I'm not a beginner.

Linda Knapp
 

She did a good job at touching a variety of different parts of Dreamweaver and showing how to use its capabilities. She did go pretty fast and I had to do a lot of rewind and rewatching as I built the sample website along with her. I would have been frustrated if I was in the classroom. All in all though I found the class easy to watch and informative.