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:

HTML
      
    
<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:

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

You’ll eventually add this link back once the supporting back-end is set up.

Minimal Working Template

As posted by Paul, you can use the minimal template that he provided instead:

HTML
      
    
{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Projects</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <h1>Projects</h1>
        <div class="row">
        {% for project in projects %}
            <div class="col-md-4">
                <div class="card mb-2">
                    <img class="card-img-top" src="{% static project.image %}">
                    <div class="card-body">
                        <h5 class="card-title">{{ project.title }}</h5>
                        <p class="card-text">{{ project.description }}</p>
                        <a href="#"
                        class="btn btn-primary">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
    </body>
</html>

If you run into an error, keep training your debugging muscles 💪 and carefully read the error messages that Django provides. Make sure to also always check the Comments & Discussion section of a lesson, to find out whether someone else ran into the same issue and found a solution for it.

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.

Gascowin on Oct. 20, 2019

Hi, you mentioned that the html you copy-pasted is in “the associated article”. Can you please direct me to this? I cannot for the life of me seem to find it anywhere. Thanks.

Geir Arne Hjelle RP Team on Oct. 20, 2019

The “associated article” is available in the Supporting Material link below the video. It’s Get Started With Django Part 1: Build a Portfolio App

Paul on Oct. 30, 2019

When I went over to the article, the code there was slightly different then what was shown in the video here. Copying and pasting did not work out of the gate for me. Luckily I got some help from my friends, and this go this minimally viable template

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Projects</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
        <h1>Projects</h1>
        <div class="row">
        {% for project in projects %}
            <div class="col-md-4">
                <div class="card mb-2">
                    <img class="card-img-top" src="{% static project.image %}">
                    <div class="card-body">
                        <h5 class="card-title">{{ project.title }}</h5>
                        <p class="card-text">{{ project.description }}</p>
                        <a href="#"
                        class="btn btn-primary">
                            Read More
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
    </body>
</html>

reblark on Nov. 12, 2019

Well, thank you Paul. I read you note and copied your code and everything went swell. How odd. :-)

Tumise on Dec. 14, 2019

Thank you Paul!! hey paul would you mind helping me out with this?

fernandocima on Feb. 23, 2020

Hi all! Do you recommend any good bootstrap learning resources to make our templates stand out? Thanks!

Martin Breuss RP Team on Feb. 24, 2020

I’d recommend their official docs. They include a lot of examples and are searchable. It’s the main resource I use when looking up something about Bootstrap.

Kevin Freeman on March 7, 2020

I had the same problem as Paul and reblark when copying the html over from the article (Thanks for the fix Paul!).

Martin Breuss RP Team on March 8, 2020

Yes, the code is slightly different from the written tutorial, thanks for posting your solution @Paul. 🙌

You can get the exact code used in this tutorial to compare to by downloading the Sample Project (.zip) in the drop-down called Supporting Material underneath the video player.

Brandon Austin on March 27, 2020

Paul is the man!

Brandon Austin on March 27, 2020

Okay question here: I have uploaded all photos as .png files just as you have. They continue to show up on my website as very large. I have tried to resize them in the preview app on my mac but same issue occurs. What should I do?

Martin Breuss RP Team on March 28, 2020

Hi @Brandon. The images should by default fill the full size of your card, if you are talking about the project overview. Did you check the Bootstrap Card docs?

If you think they are too large on the individual detail pages, you can check in the Bootstrap docs as well to find HTML classes to apply to your elements to make them resize in the way you want to. Check out:

In general for styling your page, especially when you are using a framework (e.g. Bootstrap), it’s always best to try to achieve the style you want through using the means they natively support, rather than manually changing the size of your image. Hope that helps!

Brandon Austin on March 29, 2020

@Martin thank you for your timely reply. This course was fantastic and I greatly appreciate the effort you put into it.

angellondres500 on March 30, 2020

once again Thank Paul

okorobright13 on April 14, 2020

Hi@Paul on Oct. 30, 2019,this was helpful because at that stage from the video,this information was missing.thanks to everyon and the realpython team.

eawongtheprogrammer on Sept. 13, 2020

Hi guys,

The problem with copying the bootstrap code over from the associated article is because of the following line:

<a href="{% url 'projects:project_detail' project.pk %}"

Change the url to #:

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

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.