Lessons

Lesson Info

How to Create a Bootstrap Header Section

Let's come up here to this header section, and I'm going to click on it so we can see what we have to work with. I'm using my up arrow to go up, a whole bunch of stuff in there, and I get this thing called jumbotron. So it's a div, lots of divs in Bootstrap, right? And you guys already know what a div is. It's just like a holder to hold stuff and a jump…what the heck is a jumbotron? So a jumbotron is just a piece of Bootstrap CSS, and it's just for a big giant area on the page. That's all it is. It's jumbotron. So we have some text in here. We're actually going to keep some of this text, and we're going to put our logo like we did in the last one. And I'm going to create my own custom CSS. So I want this jumbotron to be purple, right? Now, I could take their .jumbotron and recreate it in my CSS and make it purple. The problem is I'm going to use jumbotron again and all my jumbotrons will be purple, and that's not what I want. Because if you guys remember our original design, we had a p...

urple area, a white area, a pink area, and a tan area, and those are jumbotrons. So we don't want everybody to be purple, so we're going to make up our own CSS and we're going to call it Hero. So here inside of my Selectors, I'm going to click New. I'm going to make it an ID because I'm only going to have one Hero section because that's the top part. So I have my Hero and I'm going to go ahead and apply it with my jumbotron. We can have… Let's see if I can open up the dom. Here's my jumbotron in my header. You can apply multiple pieces of CSS to a single object. So I can have jumbotron. This div can be jumbotron and Hero. There's no limit. So I have jumbotron div selected. I'm going to hit the little plus and I'm going to say #hero. Cool. So now, I'm going to go back to our Designer and let's take our Hero and let's go ahead and put some stuff in there. So I've got a background color. I picked the wrong thing. I did the text color. I'm going to throw that in the trash. It's not what I meant to do. I need to go to the Background category in my Properties and say Background Color and now I do tan. There we go. So I have a tan background. Look at that space. See that white space in there? It's driving me nuts. So we got to get rid of that white space. We can do negative margins. So I'm going to go to my Page Layout. And under Margins, remember I can do that little…and I'm like, "Oh, look, it disappears." It's about 20. I don't want to do math. I don't know what it is. I don't know how to figure that out without doing it that way, but I know it's 20. So we're going to do -20. I know I'm bad. I'm terrible. Don't make me do math. Don't make me do numbers. But look, hey, it worked. It worked. So again, if I had applied it to the jumbotron, all my jumbotrons would have a negative margin, and I don't want that, just this one. I don't know if the other ones need it yet. I'll worry about the other ones when we get to them. So we got this guy in there. We are going to insert a responsive image. It's actually a little bit easier to do in here. Before, we had to kind of do it by hand, but look, I have this handy dandy Bootstrap Components, Insert Menu. Isn't that cool? So earlier, we were using all the HTML ones because we were working with plain HTML. Now we're working with Bootstrap so I can insert Bootstrap goodies. And I want an image to go in here. So I'm going to go up here, mouse over, mouse over, right there. Bootstrap Responsive Image. I'm going to click on that bad boy and I'm going to say Default and I'm going to actually say Before. This gets a little confusing. So I'm inside of my header. I think it's an h1. I don't want to be inside the header, I want to be outside the header. So I'm going to say before this thing and hopefully it'll work correctly and it did. So now, I have my responsive image in here and it's just a placeholder. It just inserted a placeholder. What I can do is down in my Properties panel, I'm going to point-and-shoot. I don't know if you guys have ever done this before. I need to go to my Files so I can actually see my image, and I'm going to open up my Images and I'm looking for my Logo. So where it says Source File blah, blah, blah, blah, blah, I'm going to take that Point to File and I'm going to point and shoot it to Logo, release the mouse. Bam. Done. Isn't that fun? So I didn't have to delete the placeholder. I didn't have to monkey around it. I just redirected it. Point and shoot. So we got that in there. I'm going to add my alt tag. I actually have an alt tag. It's hiding because my screen is… It's over there. Can you guys see it? I'm not going to worry about it. It's hiding over there. If you have a bigger monitor, you can see the alt tag and kind of tape it right in there in the Properties panel. We want to… Part of this image, I need to center it. Now, we went through a bunch of rigmarole last time and how to create it around, right? But Bootstrap has stuff we can pull from. Can't remember what it's called, but I know it's the Center or something. So I click on +. I think it's Center. Look, I got three letters in there. I know it's Center something, I don't know exactly what it is. Look, it's Center Block. It did it for me. Yeah, that's it. Oh yeah, it is. It worked, right? So you don't have to memorize this stuff, you guys. Okay? It'll help you out. Just kind of remember…you remember what it starts with, then you can find it, right? So now it's Center Block and it's responsive. I didn't have to do anything special. Look, I didn't even have to create custom CSS. I used the Bootstrap CSS, Image Responsive, Center Block. It did it for me, right? So I just had to call that Bootstrap stuff up to make it do it. Okay. I'm going to add a background image. This is where you have to start figuring out where you want to put stuff. So just like you can have multiple classes on things, you can have multiple backgrounds on the same things now. We could not do that in CSS 2, but we can do that today for CSS 3. You can put multiple background images on an object, which is really cool and really helpful and does a lot of… It's cool. It frees you up to do a lot of stuff. So at this point, I want to have a background image that's a pattern and I want to have a background image as a donut. And I could put them both on the same place if I wanted to, but I have so many things to work with in here, I actually don't need to do that. So if we come in here, I've got my image. I'm going to do my up arrow. I've got this div. There's the column, extra small, 12. I go up. I've got a row, this thing called a row. I've got a container. I've got the jumbotron. So I have a lot of places that I can put stuff in my CSS. And for my image, I'm going to do row, but I'm going to do a special row. I'm going to do a row inside of the Hero only. So I'm kind of calling on the one that I created to get very specific, right? So we're doing specificity here. So I'm Hero row, and I want to do a new Selector. And look, it helps me. So it helped me figure out what CSS to create to be able to place this. I don't need container. I've got containers. I know we had only one container in ours, there's a whole bunch of containers in here. But I don't need that container part, I just need row. So if you're a row inside of the Hero, then you should... If I go to Background, and I'm going to do Background Image. So here it says URL. I'm just going to click on the folder. I need to go into my root folder. I need to go into my images folder. I need to choose my donut.png. I can choose Open, and look at that. There it is. That's not what I want it to look like, so I come down here to Background Repeat. Do I want it to repeat? No. So it gives you these little icons to help you figure things out. Sometimes they make sense and sometimes they don't. So no repeat. It's too big, so I'm going to do Background Size. I'm going to do Contain because I want it to contain my background image. It's really big. I didn't take out a bunch of stuff yet. It'll be better I promise. We don't want it to repeat. My position, I'm going to go to Background Position, and I want 0, 0. So let's see if I can make it show up. Let's just make sure that it showed up if I go in here. Yes, it did. Okay, good. All righty. So we've got… I don't want this h1. I'm going to delete the whole h1. I have h1 selected, just hit Delete. And I've got this stuff and I don't want the buttons. So I'm going to get rid of the button. I'm going to get rid of that text, and I think I got more text in there. I think that's all I got in there. So I want that text and I want my logo and that's it. So that's all that's in there. Now, it's too big. I need to get over. Go away. All right. So for my 1200... Let's see. How do I want to do this? We're going to change this whole div. So for my large screen, I'm going to go up one. The only thing that it's set to is extra small 12. And because it's set to extra small 12, remember this is mobile-first, so it's going to span 12 columns for every screen, and that's not what I want. So what I want is I'm going to go to extra small actually which is this. See, extra small is pretty big, the 767 here. And what I can do is Bootstrap, it has these little handles. You see these handles? I have a handle on the left so I can offset my column and I have a handle on the right so I can resize my column. So I just drag it. And look, it's changing the number for me. Yes, it is. So the trick that I'm going to tell you is I want you guys to do this starting with extra small and then keep testing up and up. Because a lot of times, you have to change extra small and maybe small and that's it, and it'll be fine for large. Because you don't want to over-style. If you start playing around, like you start with large and you move it, and then you go to medium and you move it, and then you go to small and you move it, you're going to have like 10 different settings. You want the least amount of settings that you need. So now, I want it offset because I want to see my big fat donut. So I just slid this over and now I can see my donut. And let me just make sure what my settings are. On my extra small, I have column 7, so I'm going to make this bigger, and offset 5. So that's what I want it to look like. And if I go to the next size, it looks good. If I go to the next size, it still looks good. It's when I get to the large which I can't do on this screen. Actually, let's see if we can do that. Let's see if we can go like that. Barely. Barely. Come on, baby. Can I get it? It's closed. It's closed. I don't think it's… I guess it is because the little wine is there. So for the large one, I want it to be six. Let's see if I move this if it's going to change. Nope. See, I'm in medium. I want this to be large. I'm going to do it by hand you guys because I can't see my screen. So I want column 6 and I want it offset 3. Oops. So I'm going to do col and I'm going to do large offset 3. Did it take it? Of course not. Stop that. That is not what I want. Large. And then col-lg-offset-3. Okay. Now it should have worked. Okay, so real quick, let's go ahead and do a File Save All and we'll test it and see how it looks. Save All. It's just telling me it needs to save the placeholder PNG, that's fine. I don't really need it anymore because we replaced it but we're good. We'll save it anyway. So now, when I have it big, it looks like that. Smaller, smaller, smaller. So that's what we created. And then it gets a little weird when it gets small, and we're going to create our own media query to be able to overwrite that so it looks okay on the phone. All right?