Made withFlaskClip

Flask Tutorial #3 - Adding Bootstrap and Template Inheritance

T

Tech With Tim

Creator on the Flask channel

Watch on YouTube ↗

367K viewsOct 30, 201912:11 runtime

Learn to streamline your Flask web development by mastering template inheritance and integrating Bootstrap. This tutorial demonstrates how to create a `base.html` template to define common elements like a navigation bar, preventing code repetition across your site. Discover how…

Chapters

#flask#clip#backend

Template Inheritance in Flask

Template inheritance allows you to build a base "skeleton" template that contains all the common elements of your site and define blocks that child templates can override.

Base Template (base.html): Contains the main HTML structure (<html>, <head>, <body>), shared elements like navbars or footers, and defines blocks.
Child Templates (index.html, etc.): Use extends to inherit from the base template and then fill in the defined blocks with their own specific content.

Key Jinja2 Syntax

{% extends 'base.html' %}: Must be the very first line in a child template. It tells Jinja to inherit from base.html.
{% block title %}{% endblock %}: Defines a block named title in the base template. Child templates can override this section.
{% block content %}{% endblock %}: In a child template, this syntax is used to insert content into the corresponding block defined in the parent.

Important
A child template does not need to define every block from its parent. If a block is not overridden, the content from the parent template (if any) is used instead.

Integrating Bootstrap

Bootstrap is a popular CSS framework for building responsive, professional-looking websites quickly. You can add it to your Flask project without downloading any files by using a CDN (Content Delivery Network).

Setup Process

Add CSS: In your base.html file, copy the <link> tag for the Bootstrap CSS and place it inside the <head> tag, preferably before any other stylesheets.
Add JavaScript: Copy the <script> tags for Bootstrap's JavaScript (which may include Popper.js and jQuery) and place them at the very end of the <body> tag. This ensures the page content loads before the scripts, improving performance.

Tip
Once Bootstrap is added to base.html, you can copy and paste components like navbars directly from the Bootstrap documentation into your template. Since all other pages extend base.html, they will all automatically get the Bootstrap styling and components.

Flask Development Workflow

To make development faster, you can enable Flask's built-in debug mode.

Automatic Server Reloading

In your main Python file, modify the app.run() call:

app.run(debug=True)

Note
When debug mode is active, the Flask development server will automatically reload whenever you save a change to your Python or template files. This saves you from having to manually stop and restart the server after every code modification.

Introduction to Template Inheritance

Hello everyone and welcome back to the Flask tutorial. So in this video, what I'm going to be doing is showing you something called template inheritance, which is an extremely useful tool so you're not repeating HTML code or JavaScript or whatever it's gonna be throughout your entire website. It essentially allows you to create kind of a base template that every other one of your templates will work off of, and we'll talk about that.

I'm also gonna be showing you how we can add Bootstrap to our website and just create a basic little navbar. I just want to show you guys really, you know, simply how you can actually make your website look good, and then that way you guys can kind of go after this video, change some things up, and understand how to actually style your website. Because throughout most of these videos, I'm not really gonna be talking about front-end development. Most of it's gonna be functionality, back-end, talking about user authentication, forms, all those kind of things. And I just want to give you an idea of how you can actually make a decent front-end without having to use some frameworks like React or, you know, Angular, stuff like that. Alright, so let's go ahead and get started.

Creating the Base Template

Now I just wanna give you a basic example of what I mean by template inheritance. Now if we look at, you know, the Bootstrap website which we're gonna be using later in the video, we can see here that this website kind of has a theme, and we can kind of detect that theme by this navbar up here that you know, has a specific color, it has some things on it. And we know that when we click items on the navbar, depending what we click, obviously, we're probably gonna be directed to a page that looks similar with just slightly different content.

Now it wouldn't really make sense for Bootstrap or for any of these websites to keep writing the code to generate this navbar on every single web page that they have because this is kind of something that's set, it's gonna stay the same for most of the pages. And in fact, there's probably some more other similar things like maybe, you know, the footer at the bottom of the website, I guess it doesn't have one so I can't show you that, they're gonna stay the same. So what should we do to, you know, accomplish not having to repeat this code?

Well, Flask at least makes this really easy because we can actually inherit templates. Now what I'm gonna do to illustrate this is just create a new template. So I'm just going to create a new file, I'm gonna save this as base.html, and this is gonna represent the base template or kind of the base theme of my website. It's gonna store all the HTML code that will persist throughout most or the entire website.

Now in here, I'm actually just gonna copy all the HTML from index.html and put it directly inside here. Now I'm going to delete this from index.html. We'll start working with a few things here. So since this is our base template, that means that we are not actually gonna ever render this template; we're always just gonna use this as something that, you know, the child templates, which will be for example index.html, will inherit from. And if you're unfamiliar with inheritance, that essentially means, you know, use everything and then change a few small things or overwrite some functionality of, you know, the parent, which in this case is gonna be the base.html.

Defining & Overriding Template Blocks

So the way that we can allow our child templates to change specific functionality of the base template is by adding something called blocks. Now you guys will understand this more as we get through, they'll just follow along for now. What I'm gonna do is just create something called a block, and I'm gonna put it inside the same tags we used before to write, you know, for loops and if statements inside our HTML code. I'm gonna give this block a name by just typing the name directly after block, and then what I'm gonna do is simply end the block by typing endblock. So very similar syntax to what we've seen before.

Now what this does is essentially say, 'Okay, we're gonna define a block, we're gonna call it content, and this block, we will allow the child template to give us some content that we will fill in.' So essentially what I can do now is I can go to this child template, I can inherit base.html, I can create this block, and then I can tell, you know, this block what content I want, and then it will actually substitute it inside here for a title and it will use that title when we render the template. So rather than talking about it, let's actually do it.

So to extend a template, what we need to do at the very top of our template is type extends, not in all capitals like this, and then in quotation marks the name of that template. So in this case it's gonna be base.html. It's important that these templates are in the same directory so they can actually see each other. If they're not, then you'd have to do, you know, like folder/base.html if that's inside an interior folder. Okay, so we're gonna extend base.html and now what I'm gonna do is actually give some content for that block content. So this is the exact same as what we had in our base template, except this time I'm actually gonna put some stuff in between kind of blocks. So I'm gonna say endblock like that. So block content, endblock, and then inside here I'm actually just gonna put 'Homepage'. Now what this is gonna do is very similar, just kind of like an HTML tag, where this 'Homepage' now will be replaced with whatever this block content is, and that will actually show now for us inside title. So very useful and, you know, can definitely save us a lot of time.

Now what I'm gonna do is get rid of this content here and I'm actually just gonna put something that just says, you know, 'Tim's Website'. And this h1 tag, I'm assuming is gonna be shown on every single page no matter what. So we'll leave that there as an h1 tag.

But what I want to do is create another block, and I'm gonna call this, oops, and I'm going to call this block title, my apologies guys, because I actually want to call my next block block content. So we'll change the name of that.

Creating Content Blocks and Enabling Debug Mode

And then what I'm gonna do is define another block. I'm gonna call it block content, which will represent in our case the content of the website or the content of the web page. So I'll do... actually I don't know why I copied that. And then we'll type endblock, and now what I've done is defined another block that we can, you know, overwrite, we can put some information into. So now from our child template, we'll write this block again. So we have block content, and then we will simply end the block. And now in between these two tags, I can put any HTML code I want and that will actually be rendered to my base.html template whenever, you know, we have that popping up. So let's do another h1 tag and we'll just say, you know, 'Test' like that, and we'll leave it at that for now.

Okay, so let's go back to our actual Python code. Now this is the exact same that I had in the last video, so if you haven't seen that then you can check that out. And quick side note, I will be putting most of this code on my website, there will be links in the description to that. I'm gonna make one minor change to this because someone did leave a comment, and this is definitely gonna be helpful for all of us. In this app.run, we can actually define something called debug=True, so just a keyword argument here. And what this is actually gonna do is allow us to not have to rerun the server every time we make a change because it will automatically be detecting those changes and updating the website for us. So I'm gonna do that and make sure I save that.

Testing the Inherited Template

And then what I'm gonna do is run Python tutorial3. You'll notice we get a few more kind of debug things popping up for us. And then what I'm gonna do is just grab this URL. We'll go to a new web browser window, open that up, and there you go. We can see we get 'Tim's Website' and we get 'Test'. So that is kind of exactly what I wanted, you know, show you guys. That's how that works.

We're extending this base template, we're adding our own, you know, 'Test' to that base template by putting it in the block content, and that is pretty much how this works. Now, you might be like, well this is kind of, you know, useless right now because all we're doing is just showing an H1 tag. Rather than doing all this extra work, why wouldn't I just, you know, take this H1 tag and just write to all this HTML in index.html? Well, like I was saying before, often times we're gonna have some more complex components, and I'm actually gonna show you how we can add a nav bar now and then how we can use kind of the base template so all our other templates will have that nav bar on it.

Integrating Bootstrap CSS & JavaScript

Okay, so now that that works, let's actually talk about adding Bootstrap. So if you're unfamiliar with Bootstrap, essentially what this is is a kind of CSS framework, I want to say, for quickly kind of creating and styling your website. Now, to add this is actually pretty easy. And what I'm gonna do is just grab from the Bootstrap website, which I'll leave a link to in the description down below, I'm gonna look where it says CSS and I'm gonna copy this link right here. So there's actually something that says copy, so all of this. And again, this code will be on my website at some point, so if you miss that, you should be able to grab it.

I'm gonna take that CSS link, I'm gonna paste that inside of my head tags of my website, in this case the base.html template. Next what I'm gonna do is go to where it says JS here, I'm gonna copy all of these scripts and I'm gonna put them at the end of the body. So at the very end of the actual base template here.

Now what this is gonna do is allow us to use kind of a library of different classes and, I guess, like I don't even know what you call them, just a bunch of different kind of styling things from Bootstrap to make our website look nicer. Alright, so there we go, we have all of that added in and now we actually have Bootstrap. And in case you're wondering how this works, this is on what I think is called a CDN, which essentially means we don't actually need to download any file because this is just gonna grab the CSS code and the JavaScript code from the internet. So that's kind of how that works.

Okay, so now that we have all that, what I'm actually gonna do is show you how we can just grab, you know, a kind of a sidebar layout or a navbar layout from this actual website. So what I'm gonna do is literally just search 'navbar' on Bootstrap here, and I'll leave a link to this as well. What I'm gonna do is just look for one that I like. You know, here's the navbar, here's a navbar, there's a bunch of different navbars that you can see. And this is what I typically do whenever I'm styling a website. I just take all this code for a navbar, copy it, and just put it on my website. This is the reason they have it here, so you can, you know, modify it, change it, also just use it.

So what I'm gonna do is take that code for the navbar, I've copied it, and I'm just gonna put it at the top of my body. Now I will fix this indentation because that kind of frustrates me when it's off. But now what I'm gonna do is essentially, I've added this to my base template, and now this means that any child template will automatically have this navbar at the top of it. And if you don't believe me, let me show you. So actually let's go here and refresh. And now you can see we get this nice navbar popping up at the top of our website. We also get 'Tim's Website' and we get 'Test', but you know I can delete that h1 tag because we probably don't want that everywhere.

Now, if you wanted to change any of the things associated with the navbar, obviously all the code is here, so you can change them. But that's just what I wanted to show you in terms of how we can actually add Bootstrap. Now the reason this navbar is actually working properly is because we added Bootstrap into the website. But if for some reason when you add this and it's not working, or you know, the style is looking different than this, then that probably means you didn't add Bootstrap correctly. And you need to make sure that you add this link at the top of your head tag, so at the very beginning before everything else, and that you add these scripts for the JavaScript and the jQuery at the end of your body tags.

Verifying Inheritance with a New Page

So that is kind of all that I want to show you in terms of how to add Bootstrap to your website, how to make a base template, how to make a child template that inherits that base template. And just note that you can actually create more child templates that inherit this base template. And if I want to show you a really quick example, I'll just do, you know, new.html with a... I'll set up another page to show you that this actually does work. I'm not even gonna put anything in here.

This extends base.html. I don't need to add those blocks if I don't want to. And then what I'm gonna do is just create, you know, a new route. We'll just copy this and we'll just call it /test or something like that. Okay, so /test like that. Also we can get rid of this content=testing because obviously index no longer takes that content variable, so we don't need that. And here I'll just render new.html whenever we go to that /test website or /test page.

And what is this...? Oh, I need to call this a different name. My apologies. So a good mistake there. So let's run this now, go to /test, and now we can see that we get nothing on our screen except this navbar. And if I go back to the home page, you can see that we get 'Test' showing up. So that's kind of how that works. Pretty basic, pretty easy. That is a way to kind of style your website. I'm sure some of you guys know how to use Bootstrap. You can obviously use, you know, different kinds of frameworks for styling, but I personally like Bootstrap. It's pretty easy and there you are.

So with that being said, if you guys enjoyed the video, make sure you leave a like and subscribe and let me know if you want to see any other stuff from this series in the future.