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

Unlock This Lesson

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

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Styling

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.

Comments & Discussion

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.

Become a Member to join the conversation.