Join us and get access to thousands of tutorials and a community of expert Pythonistas.

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Styling

Getting Started With Django: Building a Portfolio App Martin Breuss 04:02

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.

Bootstrap Template Issues

If you copy the Bootstrap code from the associated tutorial without applying any changes, then you will run into an error. As eawongtheprogrammer mentions in their comment, this is because of the following line:

<a href="{% url 'projects:project_detail' project.pk %}" class="btn btn-primary">
    Read More
</a>

The code is referencing a route that you haven’t built yet, which throws Django into light confusion. Change the href attribute value to a hashtag (#) to fix this issue:

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Already a member? Sign-In

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.

00:55 All right, pretty similar to before.

01:00 So, what’s missing? And you guessed it, yes, we did not connect it to Bootstrap. Like, there is no link to the CSS Bootstrap file. We still have that sitting over in our index.html, here.

01:13 This link is what we need that links to the Bootstrap CDN, and then the CSS file that we need to style our classes. I head over to the projects and add it in here, in the <head>.

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.

02:05 Otherwise, you can go to the article and copy this code. It should work for you, but just to make sure to do know what’s going on here, let’s walk over it quickly.

02:20 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.

02:38 So, over here we see one row and then we could have another row down here.

02:45 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.

03:17 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 .title and .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!

03:51 It looks like a lot, but it’s not actually that complicated. And, as I said, you can just go ahead and copy this. That’s all for our template styling for now.

joshuadwyrick on Sept. 14, 2020

@eawongtheprogrammer My god thank you my man, had a really hard time figuring out why this call didn’t work. Thanks dude.

jjfcode on Oct. 12, 2020

Hi Martin

Thanks for everything. I have a problem and I cant find the solution with the image.

[12/Oct/2020 03:34:31] “GET /projects/ HTTP/1.1” 200 524

[12/Oct/2020 03:34:31] “GET /static/projects/img/testproject.png HTTP/1.1” 404 1710

[12/Oct/2020 03:34:31] “GET /static/projects/img/todo.png HTTP/1.1” 404 1689

can you help me to solve the problem to continue with the class

Thanks John

jjfcode on Oct. 13, 2020

@Martin please help on this error

[12/Oct/2020 03:34:31] “GET /projects/ HTTP/1.1” 200 524

[12/Oct/2020 03:34:31] “GET /static/projects/img/testproject.png HTTP/1.1” 404 1710

[12/Oct/2020 03:34:31] “GET /static/projects/img/todo.png HTTP/1.1” 404 1689 Thanks

Martin Breuss RP Team on Oct. 13, 2020

Hi @jjfcode it’s very hard to say where your problem lies with just seeing the lines of output you shared here. The only things I can see from these is that:

Django was able to find your main projects page at /projects successfully
Django was not able to find the two images testproject.png and todo.png at the location in /static/projects/img/

So here are some of my best guesses that could help you debug your situation:

Folder Structure: Did you follow the double-folder structure for static files?
Images: Did you add the image files and named them exactly testproject.png and todo.png and put them into the correct folder?
Model Field Change: Did you follow the process described in Debugging Part 1 and Debugging Part 2 to change the model field from FilePathField to CharField?

Check up on these suggestions and go step-by-step to see whether this solves your issue. If not, make sure to post an explanation of what happened at each step when trying the suggestions, then I can try again with more information. All the best! :)

jjfcode on Oct. 16, 2020

Hi @Martin I start the Debugging again and found the problem it was a wrong spell Thanks John

Andy Pickett on March 12, 2021

I think it would also be useful here, to add a quick video comment to point to the issues that are causing the confusion. I did find the answer in the comments but first tried copying from the article, then downloaded the resource and tried again which also failed and then found eawongtheprogrammer’s response which cleared it all up. If a pop up in the video explained this it would have saved a fair bit of time.

Again, great tutorial. Really enjoying the progress I’m making and the concept of learning through errors. I loved the podcast episode on this too!

Martin Breuss RP Team on June 29, 2021

Hi @Andy Pickett! Glad the course has been useful, and thanks for the feedback. I’ve went ahead and added an explanation to the Description tab of this lesson. Hope that’ll make it quicker for other learners to find the issue, fix it, and give them a heads-up that there’s a lot of great info in the Comments & Discussion section :)

millionairematt on Nov. 21, 2022

Just a heads up:

At 0:25 in the styling video, when the html code is copied from the complete project, there is a difference between the supplied code and the pasted code in the video.

Line 20 in the supplied code is:

<a href="{% url 'projects:project_detail' project.pk %}" class="btn btn-primary">Read More</a>

Line 20 in the video is:

<a href="#" class="btn btn-primary">Read More</a>

Since I have learned by now that errors are your friend, it was easy for me to find the issue and fix it.

Khaled on Feb. 9, 2024

I am having issues with centering the page. All the elements are left-aligned… any help would be great, I copy pasted the latest template code and still fails..

Khaled on Feb. 9, 2024

All good, I figured it out. The template was missing the class=”container” for the body tag.

Become a Member to join the conversation.