How to Add Bootstrap and Style Your Website with a Template

So I'm gonna do is go to where it says J s here I'm gonna copy all of these scripts and I'm gonna put them at the end of B 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 website look nicer all right 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 C a CDN which essentially means we don't actually need to download any file because this is just gonna grab the CSS code in 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 I 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 nav bars that you can see and this is what I typically do whenever I'm styling a website I just take all this code for an ounce bar copy it and just put it on my website this is a 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 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 nav bar 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 tests 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 associate with the navbar obviously all the codes 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 what we added bootstrap into the website but if for some reason when you add this and it's not working or you know the Styles 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 strips for the JavaScript and the Drake query at the end of your body tags 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 than inherit this base template and if I want to show you a really quick example I'll just do you know new dot HTML with a set of another page to show you that this actually does work I'm not even gonna put anything in here this extends based on 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 routes we'll just copy this and we'll just call it slash like test or something like that okay so slash test like that also we can get rid of this content equals 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 slash test website or slash test page and what is this oh I need to call this a different name my apologies so it's get a mistake there so let's run this now go to slash test and now we can see that we get nothing on our screen except this nav bar and if I go back to the home page you can see that we get tests 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 kind of frameworks for styling but I personally like bootstrap it's pretty easy and there you are.

Creating a Template

So let's create a template. The reason this navbar is actually working properly is because what we added bootstrap into the website. But if for some reason when you add this and it's not working or you know the Styles 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 strips for the JavaScript and the Drake query at the end of your body tags.

So how do we create a template? We can start by creating a new file in our project directory. Let's call it `base.html`. In this file, we'll add the basic structure of our HTML document, including the head and body tags.

Next, we'll import the bootstrap CSS file into our head tag. This will give us access to all of the styling classes that we can use to customize our website.

We'll also add a link to our JavaScript files in our script tag. This will allow us to use the functionality provided by these files in our website.

Finally, we'll add a comment block at the bottom of our file. This is where we can leave notes or instructions for other developers who may need to work on this project.

So here's what our `base.html` file might look like:

```html

```

This is just a basic template, but it provides a good starting point for building our website.

How to Create a Child Template

Now that we have our base template set up, let's create a child template. This will allow us to customize the layout and content of our website without having to duplicate code in multiple places.

To create a child template, we can simply copy the `base.html` file and rename it to something like `child-template.html`. We'll then modify this file to include any additional content or styling that we need for our specific use case.

For example, let's say we want to create a child template for a homepage. We can start by copying the `base.html` file and renaming it to `index.html`.

```html

Welcome to our homepage!

This is a paragraph of text.

```

As you can see, this child template includes some additional content and styling that we didn't need in our base template.

How to Use Our Template

Now that we have our base and child templates set up, let's talk about how to use them. The first step is to create a new file for each page of your website. This will allow you to customize the layout and content of each page without having to duplicate code in multiple places.

For example, if we want to create a new page called `about.html`, we can simply create a new file with this name and include our child template inside it.

```html

About Us

This is a paragraph of text.

@include('child-template')

```

As you can see, we're using the `@include` directive to include our child template inside this new file. This will allow us to reuse the same layout and content in multiple places without having to duplicate code.

Conclusion

In this tutorial, we learned how to add bootstrap to our website and create a basic template for building our site. We also learned how to create a child template that can be reused across multiple pages of our website. This is just the beginning of our journey into web development, but I hope this tutorial has given you a good starting point for building your own websites.

"WEBVTTKind: captionsLanguage: enhello everyone and welcome back to the flats tutorial so in this video what I'm we 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 in talking about user authentication forms all those kind of things and I just want to give you as an idea of how you can actually make 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 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 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 gonna create a new file I'm gonna save this as base dot 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 are overwrite some functionality of you know the parent which in this case is gonna be the base dot HTML 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 their name directly after block and then what I'm gonna do is simply end the block by typing and block so very similar syntax will be seen before now what this does is essentially say ok 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 based on HTML I can create this block and then I can tell you know this block where 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 based on 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 slash based on HTML if that's inside an interior folder okay so we're gonna extend based on 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 and block like that so block content and block 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 is h1 tag but what I want to do is create another block and I'm gonna call this oops and I'm called this block contents alright I'm gonna 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 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 copy that and then we'll type end block and now what I've done is to find 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 and 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 dot HTML template whenever you know we have that popping up so let's do another h1 tag and we'll just say you know tests 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 sidenote 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 dot run we can actually define something called debug equals 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 and then what I'm gonna do is run Python tutorial 3 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 tests 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 out in the blog 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 and index on 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 ok 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 missed 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 J s here I'm gonna copy all of these scripts and I'm gonna put them at the end of B 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 website look nicer all right 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 C a CDN which essentially means we don't actually need to download any file because this is just gonna grab the CSS code in 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 I 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 nav bars that you can see and this is what I typically do whenever I'm styling a website I just take all this code for an ounce bar copy it and just put it on my website this is a 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 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 nav bar 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 tests 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 associate with the navbar obviously all the codes 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 what we added bootstrap into the website but if for some reason when you add this and it's not working or you know the Styles 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 strips for the JavaScript and the Drake query at the end of your body tags 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 than inherit this base template and if I want to show you a really quick example I'll just do you know new dot HTML with a set of another page to show you that this actually does work I'm not even gonna put anything in here this extends based on 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 routes we'll just copy this and we'll just call it slash like test or something like that okay so slash test like that also we can get rid of this content equals 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 slash test website or slash test page and what is this oh I need to call this a different name my apologies so it's get a mistake there so let's run this now go to slash test and now we can see that we get nothing on our screen except this nav bar and if I go back to the home page you can see that we get tests 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 kind 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 futurehello everyone and welcome back to the flats tutorial so in this video what I'm we 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 in talking about user authentication forms all those kind of things and I just want to give you as an idea of how you can actually make 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 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 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 gonna create a new file I'm gonna save this as base dot 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 are overwrite some functionality of you know the parent which in this case is gonna be the base dot HTML 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 their name directly after block and then what I'm gonna do is simply end the block by typing and block so very similar syntax will be seen before now what this does is essentially say ok 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 based on HTML I can create this block and then I can tell you know this block where 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 based on 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 slash based on HTML if that's inside an interior folder okay so we're gonna extend based on 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 and block like that so block content and block 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 is h1 tag but what I want to do is create another block and I'm gonna call this oops and I'm called this block contents alright I'm gonna 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 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 copy that and then we'll type end block and now what I've done is to find 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 and 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 dot HTML template whenever you know we have that popping up so let's do another h1 tag and we'll just say you know tests 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 sidenote 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 dot run we can actually define something called debug equals 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 and then what I'm gonna do is run Python tutorial 3 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 tests 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 out in the blog 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 and index on 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 ok 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 missed 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 J s here I'm gonna copy all of these scripts and I'm gonna put them at the end of B 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 website look nicer all right 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 C a CDN which essentially means we don't actually need to download any file because this is just gonna grab the CSS code in 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 I 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 nav bars that you can see and this is what I typically do whenever I'm styling a website I just take all this code for an ounce bar copy it and just put it on my website this is a 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 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 nav bar 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 tests 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 associate with the navbar obviously all the codes 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 what we added bootstrap into the website but if for some reason when you add this and it's not working or you know the Styles 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 strips for the JavaScript and the Drake query at the end of your body tags 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 than inherit this base template and if I want to show you a really quick example I'll just do you know new dot HTML with a set of another page to show you that this actually does work I'm not even gonna put anything in here this extends based on 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 routes we'll just copy this and we'll just call it slash like test or something like that okay so slash test like that also we can get rid of this content equals 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 slash test website or slash test page and what is this oh I need to call this a different name my apologies so it's get a mistake there so let's run this now go to slash test and now we can see that we get nothing on our screen except this nav bar and if I go back to the home page you can see that we get tests 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 kind 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\n"