FREELessons: 7Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Building a Product Page

In this lesson you will create a simple e-commerce product list page using the Bootstrap 4 framework as a starting point.

Useful Links

2.1 Building a Product Page

Hello and welcome back. In this lesson, we're gonna build a simple product list page in Bootstrap 4 and we're gonna be using the basic Bootstrap grip set up, as well as the Bootstrap card component. And if you're new to Bootstrap 4, a card is very similar to what a panel was in older versions of Bootstrap. And we're gonna find that they're very easy to customize. So let's get started. You can find the URL for our starting code pin here in your course notes for this lesson. Once you've got that opened up go ahead and click on fort to create a new copy and all of our changes will be saved in this new copy. So no webpage would be complete with out a header. So let's go ahead and put a Nav bar at the very top of our page. And I'm not actually gonna put any menu items in it, I'm just gonna put a Nav bar with a title in it. So in Bootstrap 4 we would create a Nav element. We would give it a class of navbar which is the same way you would have done it in version three. But this part is a little bit different. If you want to fix it to the top, instead of using the Bootstrap 3 class which was navbar-fixed-top, you would just use fixed-top and that would do it for you. And I also wanna make this a dark navbar. So I'm gonna give it two different classes here. One of them is navbar-dark, which will adjust the text color. And then, the other one is bg-dark which will adjust the background color. So then we'll close off that opening tag and then we'll create our closing nav tag. And then inside that nav, I'm gonna create an anchor tag and we'll give it an href, we'll just give it an empty or a pound for an href for now. And we'll give it a class of navbar brand. And for that navbar brand, I'm just gonna give it a title of product list. And then we'll close off that anchor tag. So now, we've got our navbar up at the top and below that we're gonna create a three column structure with some products in it. And each of these products is gonna show up in a boot strap card component. So we're gonna put this entire layout inside a container, so I'm gonna create a div with a class of container. Nothing has changed there as far as Bootstrap 4 goes. I'm gonna create another div inside that with a class of row. And then I'm gonna use one of the new short hand column classes of col-4. You'll notice this isn't specifying a browser size. So we're not saying colmd4 or colsm4 like we would with Bootstrap 3. Now, those classes do still work if you wanna create different break points. But if you wanted to take up four columns no matter what the browser size is, you can just call it col-4. So we'll create that div that there with a class of col-4 and inside that div we're gonna create our card. So I'm gonna create a new div here with a class of card. I'm also going to give it a custom class of product card so that we can go in and make some changes in our CSS later on. But the card class again is a bootstrap specific class. And the product card class, excuse me, is a class name that I made up. So inside this card we're going to have an image affixed to the top of it. Then we're gonna have a card body and then we're gonna have a card footer. So the way the image works is we create an image element here. And I'm gonna give this a class of img-card-top. This will create an image that's affixed to the top of the card. And then we'll close off that image tag and we'll move onto the card body. So I'll create a div here with a class of card-body. And I want all the text in this card body to be centered, so I'm gonna use the Bootstrap utility class text-center. So we've got that div created inside that div. I'm gonna creat an H5 here, and I'm gonna give it a class of card title, which is another bootstrap specific class that basically just styles the title of the card. And this is gonna be a desktop computer. And then underneath that I'm also gonna create a span with a class of price. And this is not a bootstrap specific class, this is a class that I'm making up so that we can style this later on. And I will give it a price of $1200. And we also need to actually add an image here. So we need to create a source attribute and I'm just going to copy and paste a URL for an image I'm gonna use here. And there we go, so we have that affixed to the top. Now, you'll see that the image is kind of squashed, so we'll fix that in just a second. Let's finish out our card first, so after our card body. After the closing div for our card body, I'm gonna create another div here with a class of card-footer, another bootstrap specific class. And inside that footer, I'm just gonna say Add To Cart. We're actually gonna make this footer into a button as well. But we'll get to how to do that later. So let's get back to our image here, our image looks awful because it's kind of squashed. If we go up to a larger size, it starts to look better, but at the smaller sizes it looks terrible. Well, if you're used to Bootstrap 3, you can make an image responsive by giving it a class of img-responsive. But in Bootstrap 4, it's a little bit different. It achieves the same effect but instead of responsive we're gonna call it img-fluid. And that'll get our image where we need it to be, so no matter how large our browser is, the image looks just fine. Now, it's all kind of tucked under this product list or this navbar here because the navbar is fixed to the top. And we can fix that by jumping into our CSS and calling on the body element. And we'll just give it padding top of about 80 pixels. And that would nudge everything down a little bit and that looks better. And so now, that we've got that first column done, we can highlight that entire first column, copy it and we'll paste it a couple of times and then we'll just customize a little bit. So our second one is going to be a tablet. So I'm gonna go into the image URL here, and change that. The card title is gonna be tablet and we might as well give it a different price, too. Let's say it's $400. And the Add to Cart is gonna be the same. Our third item is gonna be a smartphone. So we'll copy and paste the URL for the smartphone here. And then for our title here, we'll say smartphone. And then we'll stretch this out again so that they're all at a legible size and there we go. So we've got our basic product list page set up using default Bootstraps styles. But that's not very interesting. So in the next lesson we're gonna jump into CSS and customize this quite a bit. So thank you for watching. And I'll see you then.

Back to the top