Flask Tutorial #3 - Adding Bootstrap and Template Inheritance

Подписаться 1,5 млн

Просмотров 312 тыс.

50% 1

In this flask tutorial I will be showing how to add bootstrap to a flask website and how to use something called template inheritance. This is useful as often times you have the same HTML components that you want to show on all or many different web pages. Template inheritance allows you to make a base template that other templates can inherit from.
Text-Based Tutorial: techwithtim.net/tutorials/fla...
Bootstrap Website: getbootstrap.com/docs/4.3/get...
Nav-Bar Code: getbootstrap.com/docs/4.3/com...
Playlist: • Flask Tutorial #1 - Ho...
◾◾◾◾◾
💻 Enroll in The Fundamentals of Programming w/ Python
tech-with-tim.teachable.com/p...
📸 Instagram: / tech_with_tim
🌎 Website techwithtim.net
📱 Twitter: / techwithtimm
⭐ Discord: / discord
📝 LinkedIn: / tim-rusci. .
📂 GitHub: github.com/techwithtim
🔊 Podcast: anchor.fm/tech-with-tim
💵 One-Time Donations: www.paypal.com/donate/?token=...
💰 Patreon: / techwithtim
◾◾◾◾◾◾
⚡ Please leave a LIKE and SUBSCRIBE for more content! ⚡
Tags:
- Tech With Tim
- Python Tutorials
- Flask Add Bootstrap
- Add Bootstrap Flask
- Template Inheritance
#Python #Flask #Bootstrap

Опубликовано:

29 окт 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 142

@mattmovesmountains1443 3 года назад

I've never done any sort of website design, so this feels like sorcery and I have now been promoted to wizard thanks to you.

@mattmovesmountains1443 3 года назад

@Henry I've never had the eye for, or ability to focus on styling, so I always appreciate when someone can, but I also definitely appreciate the bootstrap option.

@i_teleported_bread7404 3 года назад

@Henry Call it Source-ery. ...No?

@nyzss 3 года назад

@Henry for me it's not about time for styling, i just can't with css lol, i love javascript frameworks, backend and everything but i just can work with design unfortunately. and bootstrap, bulma etc.. is very handy for people like me, i wish one day i would also be able to write my own css that doesnt look like utter garbage

@TopBagon 4 года назад

Congratulations on 100K ^^ wish you the best of luck... those tutorials are *AWESOME*

@TechWithTim 4 года назад

Thank you!!!

@0xBerto 4 года назад

Nothing like searching for a tutorial on RU-vid and you find Tim has made a recent video for it. 🤷‍♂️🔥

@ignskeletons 2 года назад

Absolutely incredible tutorials, very easy to understand Tim and his teaching style. I'd pick him as an actual teacher, better than some college professors I've come across. Thank you! This got me off the ground running with a working Flask website with Python.

@pratyushrout2394 Год назад

Top tier stuff for someone trying to start with Flask. The concepts are well explained while demonstrating with code.

@JoseRodriguez-sb5nu 3 года назад

THANK YOU THANK YOU!! I just had a eureka moment when you explained the correlation of block content across the different pages! You rock! Thank you so much.

@f1sports388 3 года назад

Thanks Tim your tutorials are better than all the other flask tutorials

@sebastianskopek 3 года назад

wow, flask is spectacular, so easy and elegant. great vid on the subject!!

@leanh2 3 года назад

very nice tutorial Tim, not too short, not too long. Love it

@dejanatelj9037 2 года назад

Thank you very much for this video! It was very clear and easy-to-understand. New milestone in Flask.

@mstardomfinance8389 3 года назад

Thanks Tim, that Debug=True is a definite time-saver.

@Chiny_w_Pigulce 3 года назад

Remember not to use it on production!

@Fersko 3 года назад

@@Chiny_w_Pigulce What's production?

@Chiny_w_Pigulce 3 года назад

@@Fersko when the website/program is released to public

@willsoares8456 4 года назад

Good tutorial on how to setup bases, templates, and apply blocks!

@AC-dg9zt 4 года назад

I like your films, I can understand everything, it's well explained. Thank you!

@mshimanshu1000 3 года назад

films ?

@tymothylim6550 3 года назад

Thank you very much for this video! It was very clear and easy-to-follow :)

@artdenden Год назад

Your videos are really excellent! Thanks for the great content!

@tinylittleanj2 4 года назад

Wow the ability to add css to a webpage has certainly changed. The last time I looked at css was maybe 12 years ago, and stumbled across css zen garden Which I highly recommend if anyone is up for the challenge... Thanks again Tim for the content, it makes me feel that my decision to do a bs comp sci is a good one :)

@pavanmaddela8291 3 года назад

getting started with flask and all really can't find my way into it thank you so much it really a lot helpful and keeps me going......

@abdullahmoiz8151 4 года назад

Thank you very much these are excellent tutorials

@yashaspong2054 Год назад

Super appreciated Tim - really helpful!

@youranonymousyoutuber4051 4 года назад

Big fan of yours keep up the good work man very helpful

@jayasingh7810 4 года назад

Thank you sir✌ Best explanation.

@joshuasizer1709 3 года назад

Seriously helpful tutorials.

@AlexanderZ666 2 года назад

thank you very much, it’s very easy to understand.

@cristiandanni5681 8 дней назад

Thanks man, really useful!

@jonathan3488 3 года назад

Incredibly useful !

@whyarewehere6875 11 месяцев назад

i have learned good info from you , thanks

@TanaysCubingArena 3 года назад

You deserve much much more subscribers your videos and tutorials are super awesome.....

@mshimanshu1000 3 года назад

yes

@alexandergdansk 2 года назад

Thanx Tim for this good job! :)

@iRaviShekhar 4 года назад

Great work

@philippevanschendel4904 4 года назад

Great tuto !!! Thanx

@marcin_lewandowski 6 месяцев назад

Thank you Tim :)

@derrylodja 4 месяца назад

Thankss Tim 🙌

@aelb133 4 года назад

Awesome ❤❤

@mshimanshu1000 3 года назад

this is awesome !!!

@thepeeps191 3 года назад

Nice vid tim!

@bartosznowak5625 Год назад

thanks for another lesson

@gummansgubbe6225 10 месяцев назад

For anyone that chooses to download bootstrap once: Put the files in a folder called static. (static/bootstrap/css/ etc) Then reference them with href="static/bootstrap/css/bootstrap.min.css">

@waterfan3399 3 года назад

Near #350K family Hope u will reach soon.

@thepeeps191 3 года назад

Good job on 400+k subs

@bismuthnickel 10 месяцев назад

Pro tip: don't make the title a block, make it a variable for the render_template() function. It will save you alot of time. You're welcome in advance.

@alchris2978 2 месяца назад

If you make a variable in the base.html, when you're rendering a template that inherited from it, will you still be able to pass the variable? I guess that's what you're implying, I just want to be sure.

@hermesingenui2653 3 года назад

you are the best !

@carmenferrone8624 3 года назад

Hey tim this video is awesome, I'm wondering how you got your pasted links to auto wrap into a paragraph style. Thanks

@__________________________6910 3 года назад

Love u Tim ❤

@elg7640 Год назад

Thanks Tim

@JonNordland 4 года назад

I really like to see MySQL connection and login/ security!!!

@adityabhargav7879 3 года назад

its kinda late but he made it !

@mrgamerboy8316 3 года назад

great content.

@aaronad2456 4 года назад

Thank you so much!!! Great videos!! Will you do a video on how to deploy a website developed using Flask?

@VishalPoojary1994 4 года назад

I also would like to know

@alanroy8750 3 года назад

I like to see

@chetnarawat8350 2 года назад

documentation was pretty confusing for me. your explaination made it so easy. Thanks

@mvsprabash 3 года назад

Thanks for that I'm building my Personal Website..!

@hannesklammer8528 4 года назад

Hi Tim! I saw your 12 hour stream a few days ago and now I wonder if your could have set up some web-hooks with flask instead of using the socket server for comuincation between front and backend... Any thoughts on this? Thank you so much for all your great content!

@intothevode 2 года назад

Should have watch you before... I ve all over youtube searching for tutorials... MOST OF THEM SUCK... BUT YOU ROCK MAN THX MATE!! =) (not much bla bla pretty straight foward) LOVING IT... :) THANOS THUMB UP =)

@fvgoya 4 года назад

Like before watch.

@sainco3036 4 года назад

thanks.

@ashishjadhav4028 2 года назад

Hey the content is absolutely fantastic!! Such quality for free

@claudiogalinha 2 года назад

obrigado!!!

@blockAbir 3 года назад

you can also use Flask-Bootstrap package

@creativeclub2023 4 года назад

Please show how to make this type of websites online (safely). Thankyou❤

@chopinfanclub6672 4 года назад

I hope you take this tutorial to the end

@TechWithTim 4 года назад

Planning on it

@xaviruiz8345 4 года назад

Great videos! Please follow with this tutorial!!!

@davorkarasic 3 года назад

Hello Tim. Maybe I've missed it. Please, is it possible to make a video on how you pass the variable (or even multiple variables) form the front end (the user input on the webpage) to the backend where the python code is doing something with the variables entered by the webpage user? Tnx, Davor

@ilyaprieur8254 4 года назад

10th liker I LOVE YOUR VIDEOS

@leonardogaskin5438 3 года назад

Nice video Tim, very well explained, helped me a lot with a few things I didn't understand at the beginning, I'm actuslly building my website based on flask/html/Bootstrap... just a quick question: whats the best way to add some extras with css, (i.e: a bg img to a jumbotron,) the reason I'm asking is because when i was working on it, everything was perfect, but after a few hours working, for some reason any of my changes on my css file wasnt taking any effects anymore and really frustated me... is it something to do with flask or Bootstrap or my links that causes this ? Thanks i. Advance bro!

@fid8488 3 года назад

You can try empty cache of the browser. That helped for me.

@VishalPoojary1994 4 года назад

How to fetch data from database and display and How to deploy it I somehow managed to fetch and display but not sure if it's the correct way to do. Please do make a video on these

@shahabign7116 2 года назад

i have a quick questin, it might be super late since ist been a year since this video was uploaded but hopefully you can answer. What key combos do you use to fix mass indentations? it get really annoying for me to do them separately. thank you

@TReZxDrEaMz 3 года назад

Don't you need to put the scripts in a jinja block as well to inherit from it or is this not necessary?

@paulaenchina 2 года назад

Hi! What IDE are you using to write the code? Thanks!

@nabilamehreen6054 4 года назад

thank u, u fckn legend

@basilcmr 4 года назад

I heard we can connect python using flask to flutter. So can develop apps with python. please show that too. using kivy in windows pc is not an option now.

@zt.5677 2 года назад

Can we push some good old CSS into the mix?

@karthikarumugam3515 2 года назад

Hey Tim, wonderful tutorial. But I have a doubt, why the block title part is not working where you have passed the "Home" as the title ?. Can anyone explain this

@yanacey Год назад

Did you figure this out?

@insulinresistantpotato4281 7 месяцев назад

From certain angles Tim looks kinda like Sid from toy story

@Darkev77 3 года назад

Guys any clue on how to give these tabs in the nav bar a function? Like give them a purpose when clicked

@frazz3104 2 года назад

sorry this is 5 months late.. you need to add.. a href="file.html"

@Darkev77 2 года назад

@@frazz3104 hey thanks a lot! Much appreciated

@dannybanno 3 года назад

how do i make it so the navbar shows on all pages

@swaagatbsaikia7382 3 года назад

Wait... How do you get functions in python to run on a webpage?

@houda9434 4 года назад

my navbar have a different and ugly style and shown only in the home page and login page, I checked my code and didn't found the difference, Plz help

@skankhunt-zh1mo 2 года назад

do you actually HAVE to use template inheritance?

@johngiles6930 3 года назад

{% endblock %} gives me an error in pycharm. Is there additional setup required?

@omerg6857 3 года назад

also using Pycharm and {% endblock %} works perfectly for me

@par-th1 3 года назад

@@omerg6857 mine is giving error too

@somasekharneerigatti8683 2 года назад

what is shortcut for fixing indentation ?

@farhodubaydullaev7052 4 года назад

I wrote the first comment

@farhodubaydullaev7052 4 года назад

Which is better django or flask

@TechWithTim 4 года назад

There is no answer to that, depends on what you want to make

@damianstrier6465 4 года назад

I do exactly the same and it doesn't work. I don't know what I have to do

@unknownman5296 3 года назад

To get more information what tim is talking you can visit techwithtim.net/tutorials/flask/adding-bootstrap/

@naruto9xz 3 года назад

how can I import differents themes of bootstrao??

@maximdongur-ool2226 3 года назад

base.html content can be found in comments flask tutorial#6

@rumbly5209 3 года назад

I need help I have the exact same code as him in my programme (before adding navbar, inheritance part) yet when i load it up and go on my browser there's an error (without the debug=True) it says internal server error and (with debug=True) there's a massive bunch of code with all these errors I need help

@Fersko 3 года назад

Same here, did you solve it?

@Fersko 3 года назад

Hey, I solved it btw. It's because the name of the template was not the same as I wrote. Check the name of the template and then check if you wrote it correctly next to the " extends " thing. Hope it works!

@rumbly5209 3 года назад

@@Fersko yh i fixed it thank you

@cia3653 4 года назад

What shortcut/key did you use to fix the indentation please?

@sachahome3459 4 года назад

Tab

@tormodsolemslupphaug1043 3 года назад

or shift+tab to "undo" indent.

@daisymirando7772 3 года назад

Create a regisyration system using flask, Pycharm, and MYSQL. With report and query please.

@Jesseeeeee 4 года назад

7:44

@imands8958 3 года назад

Why does my nav bar look like this? And not the rectangle? :( Navbar Home (current) Features Pricing Disabled NVM GOT IT

@jasonfares806 3 года назад

How did you fix this?

@kommurulikitha2822 3 года назад

It's giving internal error what to do

@Julia-fg9zj 3 года назад

{% block title %} Home page {% endblock %} Please explain me why this title doesn't shown on our page? I've tried to do changes and put it everywhere in our base.html nowhere... and in inherited file same no matter where you put block title its just like hasn't exist :c

@alexbbry 3 года назад

{% block title %} Home page {% endblock %} is shown as the "name"/title of page, on the tab above the URL. Just google images for: "title tag in html". And you will see what i mean. You will see that indeed his page title is Home Page in this video