FREELessons: 7Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Styling the Product Page

Let’s continue where we left off with the previous project. In this lesson you will style your product page, overriding many of the default Bootstrap styles in the process.

Useful Links

2.2 Styling the Product Page

Now that we've got our basic product list page built out, I wanna customize it. So we're going to start where we left off in the last lesson. You can find this starting pen in your course notes for this lesson. And once you've opened that up, go and click on Fork to create a new copy of it. And we'll make all of our changes in this new copy. Now one of the first things I want to attack is the size of, or the height, more specifically, of each of these cards. You'll notice that the height is different. While Bootstrap Four uses the flex box model in CSS, and with the flex box model, all three of these columns are actually the same height now. And remember, we gave our inner HTML, we gave our cards here a custom class of product hyphen card. So that we can do some custom Styles for that. So let's go back into our CSS, and create a rule for .product-card. And here all I'm gonna do, is I'm gonna give it a height of 100%. And when we do that, you'll see that they're all now the same height. So dealing with column heights is much, much easier now that we're using the flexbox model in Bootstrap Four. Now just for the sake of doing something different, let's change the color of our background here. And one thing I always like to do when I'm customizing a site that's using a framework such as Bootstrap, is I like to inspect the elements and figure out what exactly, or what rules are being used to give something a certain color, or font, or whatever it is I'm looking for. So I'm gonna right click on the Nav Bar, and click on Inspect. And we can probably guess that it's the bg-dark class that's giving it that background. So we can look through, and sure enough we see the bg-dark class is giving it a background color of 343A4O. So we can either override that rule, which first of all is gonna be difficult, because it's already got a Exclamation point important on it. And that's always tricky. So instead of doing that, I'm just gonna give it a different name. So instead of bg-dark, I'm gonna give it a name of bg-red. Now it's not gonna be bright red. It's gonna be kind of an orangish shade of red. But that's what I'm gonna call it. So I'm gonna now jump into our CSS, and we'll create a rule for the bg-red class. And I'm gonna give it a color of d63f2e, and that's supposed to be background color and not just color, so let's make sure we get that right. And when we do that, there we go. So now we've got our own custom background color on our nav bar, and so now I'll just jump down to our cards. Now one thing I wanna do, is I wanna get rid of the rounded corners on these cards. And it's the card class itself that has that rounded corner on it, or that rounded radius. So let's create a rule for all of the cards on our page. Or if we wanted to get specific, we could add these to the product card rule. In fact, let's go ahead and do that. So for our product cards, we're gonna have a height of 100. We're also gonna get rid of the border radius. We're gonna set that to a value of zero. When we do that, you'll see that they now have nice sharp corners. Let's expand this down a little bit, so that we can see that a little bit better. There we go. Now the bottom corners are sharp. The top corners are sharp. Everything looks good. Now another thing I wanna do for these cards, is I wanna get rid of the border that's around the edge. I wanna make it stand out by changing the background color a little bit, but I wanna get rid of the border color. So we're just gonna get rid of the border altogether, so we'll set border to a value of none. That gets rid of the border. And then, we'll change the background color. And I'm gonna give that a value of f9f9f9. There we go, that gives it just enough of a difference that we can see it against the white background of the rest of the page. And then just to make it stand out a little bit, I'm also gonna give it a thick kind of yellowish orange border on the very top of the card. So I'm gonna create a new property here for border-top, and I'm gonna give this a value of four pixels. It'll be four pixels thick, it's gonna be solid. And we'll give it a color of fec221. And there we go. So now we have this nice, thick border on the top of our cards. So now, I wanna jump down to our footer at the very bottom. Now remember, this is in a div with a class of card-footer, which is a bootstrap class. I'm also gonna give it another bootstrap class of btn for button. And that's also gonna style this like a button. You'll notice it also centered the text there for us. And so I'm gonna add that to all of these card-footers. And so this kind of a different way to achieve this, but we're basically turning our footers into both a footer and a button. And now, when we hover over them, we get that pointer cursor, and our text is centered. So now, let's jump into our CSS, and let's customize these a little bit more. Let's create a new rule for the card footer class, or for any card footer class that also has a class of button attached to it. So there's no space in between .card-footer and .btn. It's all the same, because we want to apply this to every item that has both classes applied to it. So I'm gonna give it a different background color. I'm gonna give it a value, this is gonna be kind of a medium to dark blue color, so 005980 is the color I'm looking for there. I'm also going to give it a border of none. I wanna get rid of that top border that was on it, and there's also a bottom border, as well. And you'll notice that the bottom corners of this button are rounded. So I wanna turn that offers, as well, we give it a border radius of zero, and that'll sharpen those corners. And we'll give it a text color of #fff to brighten up that text. I also wanna make it bold, so we'll give it a font weight of bold, and then, we'll make it all capitalized, so we'll give it a text-transform property of uppercase. And there we go. Now when we hover over them, it doesn't really do anything, so that's the last thing I wanna do for these, so we're also gonna point to .card-footer.BTN colon hover. And when we hover over it, we're gonna change the background color to a value of 007cad, which is a slightly brighter shade of blue, so, there we go. So what we've done here is we've taken a very basic bootstrap page, and we've customized these components overwritten the styles for these components in order to make it stand out, and make it look less like a bootstrap site, and more like a custom built website. So thank you for watching, and I'll see you in the next lesson.

Back to the top