In this lesson, you’re going to add some Bootstrap style to what you’ve created so far in your template to make it look a bit nicer.
00:00 In this video, we’re going to add some Bootstrap style to what we’ve created so far in our template. This is going to be a quick one. Let’s just take a quick look and make it look a bit nicer. Currently, this is what we see, right? You don’t really know where does a project start, where does it end. I still have this hello again! up here.
00:21 What I did is I just copied from the finished project some HTML code that I’m going to paste here. So, this whole thing is not so much about learning Bootstrap, so you can also just go ahead and copy this from the associated article and I am still going to walk you over what’s going on here.
00:40 Essentially, it just gives this HTML structure and a couple of classes that then Bootstrap uses to style it really nicely. So step one, I copy-paste this HTML in here. Let’s take a look how it looks now.
01:30 And now, when we reload this, it already looks much more similar to our final product, with just simple styling. The same pieces of information: we have the images from the database, the title, the description from the database for each of the things that we have in there, and then we have a Read More button that—currently—doesn’t do anything, but we’re still going to create this functionality so that we can view a project also on its dedicated single page. And yeah, that’s where we’re headed next. If you want to read up more about Bootstrap, please go ahead and do that.
So, we’re creating a couple of elements here, HTML elements. This is just a heading and a class, Bootstrap things for a certain grid layout—you have to put them inside of a
<div> with the
class="container", so that’s what we’re doing here—and these containers are then split up into different rows.
What I’m doing here now is I’m using a Django template tag to iterate over this
projects variable, which is what we got back from querying our database, and then I’m creating different cards. See that here, I just assigned certain classes to it. This is
"card", and then we, for example, give it like—okay, this is a specific one that tells it that the card has an image at the top, which is where we’re going to give our source. You see, that’s the same, what we wrote before.
And here, we popped in the
project.description as the alternative text, and then we have a body where we have some textual description about the card. Each of those have their own Bootstrap classes, but what I’m doing, I’m putting in
.description from our database about that specific
project, and that’s what’s going to get displayed there. And finally, we have a button where later on, we’re going to build in a link here that gives us more information that takes us to the dedicated page for this project. And that’s all!
Become a Member to join the conversation.