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.

More Styling

Your finished project still looks a bit better than your current project, so let’s spice it up with a bit of Bootstrap. You’re going to center the contents and add some navigation.

Comments & Discussion

Gascowin on Oct. 21, 2019

I observed that when you previewed the app in the Iphone view that the ‘Home’ nav button failed to show. I added some other buttons like a dropdown link in my own version of the app that also would not show unless I previewed the app on an iPad Pro. I could not seem to fix this. Would you happen to know of a way around this?

Martin Breuss RP Team on Oct. 23, 2019

The Home and other nav buttons are still present, Bootstrap’s responsive nav-bar simply nests them in a drop-down menu to optimize for space.

When you click on the hamburger menu on the top right of the page (when viewed on a phone) you should see the other nav links there.

reblark on Nov. 14, 2019

Once again, I believe I have done everything right. I have spent much time debugging and found many errors that I have corrected. The additional styling does not appear even though the page does. I am just showing you the source code from the page, (show source code in Safari) to show you that the class “col-md-8” doesn’t make it. It’s like the new code in detail.html just doesn’t make on the path to the page. If you think there is something specific I should look for, I would appreciate knowing it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portfolio</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>


<div class="container">
   <h1>Projects</h1>
        <div class="row">

            <div class="col-md-4">
                <div class="card mb-2">
                    <img class="card-img-top" src="/static/projects/img/720720.jpg">
                    <div class="card-body">
                        <h5 class="card-title">Good, good</h5>
                        <p class="card-text">this is with good image</p>
                        <p class="card-text">Django</p>
                        <a href="/projects/4"
                        class="btn btn-primary">
                            Give me More
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mb-2">
                    <img class="card-img-top" src="/static/projects/img/Nancy2.jpg">
                    <div class="card-body">
                        <h5 class="card-title">More good</h5>
                        <p class="card-text">Nancy at her best</p>
                        <p class="card-text">Django</p>
                        <a href="/projects/5"
                        class="btn btn-primary">
                            Give me More
                        </a>
                    </div>
                </div>
            </div>

        </div>
</div>


</body>
</html>

reblark on Nov. 14, 2019

The video at 1:23 shows three tabs at the top: Portfolio Home Blog

At 3:51, after adding the Bootstrap code, the tabs are: Portfolio Home

Somehow, blog didn’t make it.

reblark on Nov. 15, 2019

However, when you check the page and blog is missing, when you click of the “more” button, blog appears again. When you go back, it disappears. Clearly some inconsistency here somewhere.

reblark on Nov. 15, 2019

How do I copy the Bootstrap code to put in the base.html file?

reblark on Nov. 15, 2019

The problem that I have struggled with is caused by not having access to the bootstrap code. How can anyone trying to follow along with your app develp that app without the code? Did you supply it somewhere that I missed? The frame in your video is to narrow to show the whole code, otherwise I would just freeze the frame and hand copy the code. Am I legitimately frustrated or did I make a big miss? I would very much like to complete this.

Dan Bader RP Team on Nov. 15, 2019

@reblark: The associated written tutorial (under Supporting Materials) has a downloadable sample project. I’ve also added direct links throughout the course now (for example in the first lesson and in the last one). Hope that helps you out! :)

Martin Breuss RP Team on Nov. 16, 2019

Hei @reblark–yes, the finished project I am showing is the one from the associated written tutorial, which has an additional Blog app built out that I’m pointing to in the final section.

reblark on Nov. 17, 2019

Dan and Martin

Thanks to both of you for responding. With all due respect, I feel that the ending of Martin’s tutorial is a bit messy. As you know, all along, I tried diligently to follow and replicate the app. The ending just isn’t quite right with two different pages—one with “”, one with not—and providing the code that Martin used in the last styling video should have been easy. Just referring to the written tutorial, which does not discuss that code in detail and having an unfamiliar reference to the Bootstrap code in the beginning is, well, to me, it could have been better, more responsible. I am really trying my best and when you present the styling video and show me the cool work that can be done then tell me to go study Bootstrap separately because you are not tidying up at the end, hurts. The blog app, of course, is an entirely different and exciting issue, but finishing up this app cleanly and completely is important to me. I would hope that somehow I could get a copy of the code that Martin put in the base.html file in that video. That should be easy, I think.

I am grateful for this course and starting others, like Migrations, but I really would like to finish this one neatly and correctly.

Cheers. Ralph

reblark on Nov. 17, 2019

By the way, I wondered during the course what language spells “hi” as “hei?” Must be your native language Martin.”

reblark on Nov. 17, 2019

Oh, by the way, I think I found what I was looking for in terms of finishing the site. I found the stuff about the Boostrap code for the blog. Exciting.

marcinmukosiej on Dec. 16, 2019

reblark is right. There are not that many lines of code in “More Styling” video. Copy-paste was a ‘shock’ to me and now back @Bootstrap there is completely different code for that bright-gray navbar :)

At least Martin is quickly showing full code in a video, so I can pause,write it down and inspect.

rhysflook on Dec. 20, 2019

Anyone else having similar problems to reblark can find the html code in the sample project zip file, that is where I found it.

rolandgarceau on Jan. 24, 2020

Is there a tutorial on implementing styling without having to use CORS or bootstrapping?

Martin Breuss RP Team on Jan. 24, 2020

For learning to implement all the styling by yourself without using a framework (whether it’s served through a CDN or downloaded and directly included in your project), you’d need to look for a tutorial on writing CSS.

Since Real Python is a site focused on Python, we don’t have tutorials specifically on CSS. I’ve personally found CSS Tricks to be a great resource, however, it’s more a compendium of CSS topics than a full-fledged intro tutorial.

Martin Breuss RP Team on Jan. 24, 2020

@marcinmukosiej what do you mean you are missing? You can download the project code at the top under Supporting Materials.

Let me know if there’s something else that you’re missing.

rolandgarceau on Jan. 27, 2020

I’m looking for a Django and Python specific tutorial for styling. I have experience with Babel, Webpack, and React apps- and how CSS can be used for a Reaact Portfolio. I would like to explore how to create a similar structure for this django portfolio without having to rely on outside websites to be operational in order for my site to look good.

The path I am heading is to have django framework housed on AWS and to put my django portfolio into production in a S3 bucket- again without using AWS’s CDN, but manually doing so as to be able to learn what it actually means to create all the parts of things like beanstalk would do or and other currently used highly abstracted automation from AWS. In the solutions architect tract from acloud.guru in 2018 the CDN tooling was very abstract, and now I would like a much deeper understanding of how to have ownership of such production grade endeavors than things like a simple SQLite3 DB and a loopback address on my own machine.

If there is a tutorial on production grade site building which includes PostgreSQL or a no SQL solution, including a means to remove the dependencies associated with using a bootstrap, that is what I will be looking for after creating a few blogs for some friends of mine. I do realize technology moves fast, and I just wanted to see if anyone at Real Python has already been put top this task in 2020, instead of me having to spend precious time digging through other tutorial sites, which often yield in paid services losing me as their customer.

Ricky White RP Team on Jan. 27, 2020

Hi @rolandgarceau. You could look into Django REST framework instead? That way you could separate your back-end as an API and use your React skills to use a react front-end for your apps. Using Javascript based PWAs is becoming quite common, and Django REST framework is a great way to supply a back-end for such an app.

monika on April 24, 2020

To write only “Paste via cmd+V” is not a good way for the lines from Bootstrap. The code is not accessible within the provided .zip directory. Why could you not provide this here?

Ricky White RP Team on April 26, 2020

Hi @Monika.

You can get the code for Bootstrap nav from their official docs page, here: getbootstrap.com/docs/4.4/components/navbar/

monika on April 27, 2020

Hi Rick. Thanks! Good support. I might have another question… I’m planning something like a Dashboard. Main topic is to provide several display types/tabledata in one view. How far I did understand django structure, I have to make several def functions within in one class based view in views.py responding different table data requests and if possible simple text without relationship to a database. Can I find an appropriate lesson in RealPython Tutorial or elsewhere? Perhaps you find the time to tell me another helpful link?

Martin Breuss RP Team on April 27, 2020

Hi @Monika. In Django, class-based views and function-based views (the ones used in this tutorial) are different things. You wouldn’t nest a function-based view, the ones you make with def, inside of a class-based view.

Generally, you can make multiple database queries in one function in views.py and pass all the results to a template via the context dictionary. This allows you to render data from multiple different tables in one view, that you could design as a dashboard.

Check out this tutorial link which might provide you with the info you need.

BlackJesus on May 6, 2020

For anyone facing what @reblark and others experienced, here’s the bootstrap code.

------------------------------BootstrapCodeBegin------------------------------

<nav class=”navbar navbar-expand-lg navbar-light bg-light”> <div class=”container”> <a class=”navbar-brand” href=”{% url ‘projects:all_projects’ %}”>Portfolio</a> <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”> <span class=”navbar-toggler-icon”></span> </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="{% url 'projects:all_projects' %}">Home</a>
        </li>
      </ul>
    </div>
</div>

</nav>

close it properly by adding </div> after {% endblock %}

--------------------------------BootstrapEnd--------------------------------

BlackJesus on May 6, 2020

I messed it up, here it is.

------------------------------BootstrapCodeBegin------------------------------
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="{% url 'projects:all_projects' %}">Portfolio</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="{% url 'projects:all_projects' %}">Home</a>
                </li>
              </ul>
            </div>
        </div>
    </nav>
close it properly by adding </div> after {% endblock %} 
--------------------------------BootstrapEnd--------------------------------

karakus on June 14, 2020

Hei Martin,

Thank you for this well paced and informative course. What I particularly valued was the ‘error centric why’ that gave context to the ‘what’. Now I find I groan less when I get an error :)

One thing I did note is that you only <link> to the Bootstrap css stylesheet in the Tutorial, and the Sample code. Whereas, I couldn’t get my Hamburger toggle to work until I added into base.html a jquery script and a Bootstrap javascript, as specified in the Bootstrap4 documentation. Is that what you’d expect me to need to do?

Martin Breuss RP Team on June 15, 2020

Hi @karakus, glad you’re liking the error-centric approach :)

Nice work on figuring out the Bootstrap hamburger menu! 🙌

Collapsible Hamburger Menu

You are right, Bootstrap’s default function of expanding the hamburger menu when it is collapsed relies on JavaScript code that you can include in your page by adding the following two lines to the <head> of your base.html:

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Responsive Expanded Menu

If you want to keep your code as lean as possible and don’t add any JavaScript to it, and still keep the menu functional also on mobile, another option is to change the navbar-toggle and/or navbar-collapse classes to navbar-expand.

This will simply avoid collapsing the menu items into a hamburger menu and always display them at the top of your mobile page, just like it does on the web browser.

karakus on June 16, 2020

Thanks Martin - I’ll try that.

I have one other question that I’ve not found a definitive answer for … yet, which I’d value your input on if you have the bandwidth.

I’m working on adding the Blog app to the Portfolio project and I’m unsure of whether I should place base.html in a portfolio/templates folder and change the individual app templates to reference that, thereby adhering to the DRY principle across the portfolio. Or whether, for app portability reasons, I should keep a base.html in each app templates folder. I’m also wondering whether the django template language would enable me to put a conditional statement in that looks in the top level (portfolio/templates) folder for a base.html first and only use the app specific one if the portfolio one doesn’t exist.

PS: I currently have base.html at the portfolio level and actually used the friendly errors to figure out what I needed change in various places to ensure my app templates found it!

Martin Breuss RP Team on June 18, 2020

Hi @karakus! That’s an interesting question and might come down to personal preference, although let’s see what Django suggests:

One common way of using inheritance is the following three-level approach:

  • Create a base.html template that holds the main look-and-feel of your site.
  • Create a base_SECTIONNAME.html template for each “section” of your site. For example, base_news.html, base_sports.html. These templates all extend base.html and include section-specific styles/design.
  • Create individual templates for each type of page, such as a news article or blog entry. These templates extend the appropriate section template.

While this doesn’t explicitly address your question about multiple apps, I could see it used like that as well. E.g. you’d use a project-wide base.html template, and then app-specific base_APPNAME.html templates etc.

Personally, I would make this choice on a per-project basis, since both approaches make sense to me. If it’s a project where the apps are tied together rather firmly and it’s unlikely that I would segment one of them out to use it elsewhere, then I would opt for the general base.html template, especially if unified styling and structure is something I’m going for. Otherwise, having everything neatly packaged inside of its app feels the most comfortable to me. :)

Tl;dr: I’m not sure there is a definite answer to your question. There are some good practices you can follow, such as the approach of double-inheritance that the Django docs suggest, and it’s a good idea to consider the trade-offs of either approach on a per-project basis.

Other Approaches

There are also ways to make the inheritance conditional that I have never used myself, but you could play around with it. Here are two links on StackOverflow:

I like sticking with the other approach better, though, since it feels to me this could potentially get a little messy ¯\_(ツ)_/¯

karakus on June 18, 2020

Thanks for the info Martin - it all helps!

Become a Member to join the conversation.