HomeОбразованиеRelated VideosMore From: sentdex

Bootstrap HTML CSS - Django Web Development with Python 4

1752 ratings | 230009 views
Hello and welcome to the fourth Django web development with Python tutorial. In this tutorial, we're going to spice up our home page a bit. We're going to use Bootstrap, which is a popular HTML/CSS and some javascript package that greatly helps people who are design deficient. Bootstrap isn't going to fix you entirely, but it can at least lend a helping hand. Text-based tutorial and sample code: https://pythonprogramming.net/design-bootstrap-django-python-tutorial/ https://pythonprogramming.net https://twitter.com/sentdex https://www.facebook.com/pythonprogramming.net/ https://plus.google.com/+sentdex
Html code for embedding videos on your blog
Text Comments (340)
New Peoples Society (26 days ago)
why ginger isnot working
Codetronics (1 month ago)
"Then we BOP into" ;]
Oladotun J. Ojebode (1 month ago)
@sentdex, Nice tutorials bro, Please I need your assistance, I already sent you an email. How do I modify the Teaching programming and entrepreneur heading to have a different heading for each page? The heading spans across all pages in this tutorial. Thanks
Debabrata Tah (1 month ago)
sir this {% for %}----{% endfor %}type is not working for mine. how to solve it?
Saeed M (1 month ago)
99% of programming is about memorisation and 1% creativity, and that 1% defines how good you are!
Da Daniel (1 month ago)
Rajinder (1 month ago)
in my code static is'nt work. my code same as your resources
IamYour_ Dev (2 months ago)
ur ugly
sentdex (2 months ago)
We cant all be beautiful.
Yansong Shan (2 months ago)
I tried the code, but what in my trial Home Blog and Contact are in the same line. Can you tell me what to do to fix it?
Delphine Mico (1 month ago)
Same happened with mine. In the ul tag, where the navigation item list is (Home, Blog and Contact), you can remove the 'class' attribute and replace it with style="list-style-type:none". Something along these lines: <div class="well bs-sidebar" id="sidebar" style="background-color:#fff"> <ul style="list-style-type:none"> <li><a href='/'>Home</a></li> <li><a href='/blog/'>Blog</a></li> <li><a href='/contact/'>Contact</a></li> </ul> </div>
Steve Zubrowski (3 months ago)
Never knew about the devices option in Chrome's developer tools. Awesome! This whole video was super helpful.
Leong Kar Wan (3 months ago)
agp22888 (3 months ago)
WHOA!!! Telekinesis typing at 13:17!
Harikeshav Rameshkumar (4 months ago)
I dont have a fonts folder
hector alvarado (4 months ago)
I´m trying to integrate frameworks like angular or react to django, any suggestions for doing that?
Tudor Cozma (5 months ago)
Hi mate Thank you for your job here. Can I ask... in min 14...15 you copied some HTML for a lesson ... from which one? Thank you Regards
Tudor Cozma (5 months ago)
Thank you
itsmejuju (5 months ago)
Late reply, but it's located in the video description: https://pythonprogramming.net/design-bootstrap-django-python-tutorial/
Hola Hola (5 months ago)
26minutes, this is scare.
Magikk (6 months ago)
I was having problems with the new line in the header.html file on line 8. If anyone still can't get it to work and tried a lot of things I fixed mine by making sure the open/close curly braces were on the same line. in other words put <link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}" all on one line
Michael Chairez (3 months ago)
THANK YOU!!! I was getting so frustrated!
amit pant (6 months ago)
it's could be more better if you use magnifier we need to explore it for better visual though this tutorial is much better than others which was i saw before this . thanks
Erfan Taghvaei (6 months ago)
The feeling that you think your the next Mark Zuckerberg by just bringing up this simple site !
Ajqualix (7 months ago)
The page looked zoomed out because viewport didn't load. Chrome also gave a notification at the top. When "Home" was pressed, page reloaded.
lucio iams (7 months ago)
my home. blog, contact only line up vertical if i re size the window to a certain size.....how can i adjust this...i dont see the classes tthat you reference and point to..the classess are not in style tags...is it in the CSS?..or should i just do media query for the class for the home, contact, blog and put the settings there in the style tags?...so for now the home, blog, contact..default to this...homeblogcontact.....
lucio iams (7 months ago)
also my nav bar dsoent stay static when i use scroll bar...even though i comment out the line and un comment the other line ,,, as you did
Jatin jain (7 months ago)
I downloaded bootstrap and it had lot more folders then yours. I found bootstrap.min.css file and set it's location but it isn't working Don't know what to do help!! I have bootstrap 4.0.0
ZvXGamer (4 months ago)
http://bootstrapdocs.com/v3.1.1/docs/getting-started/. Use this link to use 3.1.1 so you can follow along. I used 4.0.0 and designed my page different
Dante Nuñez (6 months ago)
the nav bar doesn't work in the new version of bootstrap :c solved: <div class="navbar bg-light" id="sidebar" style="background-color:#fff"> <ul class="navbar-nav"> <li class="nav-item"><a href='/'>Home</a></li> <li class="nav-item"><a href='/blog/'>Blog</a></li> <li class="nav-item"><a href='/contact/'>Contact</a></li> </ul> </div> =P!
Cdlrrcb Games (7 months ago)
For those that have pills that do not work (Are not spaced and in a straight line): REPLACE: <ul class="nav nav-pills nav-stacked"> <li><a href='/'>Home</a></li> <li><a href='/blog/'>Blog</a></li> <li><a href='/contact/'>Contact</a></li> </ul> WITH: <ul class="nav nav-pills nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/blog/">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="/contact/">Contact</a> </li> </ul>
Patrick Mayer (8 months ago)
Thanks for the video man! Needed this
ijazz jazz (8 months ago)
Thanks for the video visit our website https://bit.ly/2MdYZSp
Sandy Leon (8 months ago)
Would you recommend this tutorial series for someone just getting their feet wet with programming? I am learning Python at the moment
Ritu Dharmadhikari (8 months ago)
hello sir, I am unable to load the images on my page. I tried every possible way. I haven't used cnd. can you suggest a way to do so?
Bhaskarjyoti Tamuly (8 months ago)
Hey Harrison! If I write the name of my 'static' directory as 'statics' (instead of 'static' as done by you);and then I write in my 'header.html' as : href= "{% statics 'css/bootstrap.min.css' %}" , I get an error! But if instead I write 'static' in place of 'statics',then it gets perfectly executed.But,I should infact write 'statics' right,to specify the name of the directory in which I have my 'css/bootstrap.min.css' file! So,are u sure static is just the name of the directory or it's the Jinja logic there?
Matias Mir (7 months ago)
I think that you have to modify the last line in /mysyte/settings.py
Jaime Fernandez (9 months ago)
Awesome videos.
Wayne Hong (9 months ago)
I'm no front end dev but affix probably was working fine at the end because the height of the page wasn't long enough, so the browser wasn't scrolled.
Eman Alaa (9 months ago)
Great tutorial, but I have a question ,how can I upload an image from my computer by using django ?
Asif Khan (9 months ago)
can we use html file generated from Abode Muse
Asif Khan (9 months ago)
I followed your tutorial and build html file by Adobe muse and exported as html with all css and scripts. there is no error but in browser no display. Can you please let me know
Matthew Beckwith (9 months ago)
Great Tutorials!
sentdex (9 months ago)
Mostafa Ibrahim (9 months ago)
when I run my server it gives me some kind of duplication in the picture, nav, footer section just below the first (Hey, welcome to my website! I am a programmer! ) paragraph what is the problem? +sendtex
Harendra Singh (10 months ago)
Dude I'm here and I know CDN ! Bye now ! You aren't for me then.
chris mahn (10 months ago)
python manage.py runserver --insecure will allow static files to display otherwise they will be blocked.
Mũ Bạc (10 months ago)
14:59 where is the code
fuaddi syah rahman amin (10 months ago)
can we using bootstrap on admin page ??
SleeplessDev (10 months ago)
For anyone using this tutorial more recently, if you get an error trying to open the static file, you now have to add {% load staticfiles %} to the top of the page. Then do href="{% static 'path/file' %}" normally.
saulgoodman (7 months ago)
At the top of which page? Sorry, can you be more specific?
Muhammad Shoaib (11 months ago)
by placing static word in path it is not working..is it issue in main setting file?
computerScienceAndFangs (11 months ago)
Here is this tutorials code updated for django 2.0 and python3! Hope it helps! https://computerscienceandfangs.blogspot.com/2018/03/updating-sentdex-video-creating-app_14.html
Tayeb SAADI (11 months ago)
Thank you for the course
Tayeb SAADI (11 months ago)
Should I put all my HTML files inside templates directory so I can call them with "render"? what can I do to run them files outside "templates"
Naina Gupta (11 months ago)
Even though I click the contact link I see the content of the home.html file only. What can be the cause of this? Please help.
__init__ if (11 months ago)
python 4 ?????????????????????
Dan Stoian (1 year ago)
Love it!
Vinod Reddy (1 year ago)
could you please post HTML code here
jian deng (1 year ago)
the ctrl+click method to open tabs is the trick
harinder mushiana (1 year ago)
You are a godsent man. I searched for django tutorials for a long time and finally I found the perfect ones here.
vickey wu (1 year ago)
hello, sentdex. i follow your tutorial but i can't load img.png, i don't know whether there are some mistake about set url path? i use python3.6.4 and jango 2.0.1, could you give me some suggestions? thanks a lot
Not sure why but now I get a 404 error if I just navigate to the 127 address without the personal. How do I fix it on Bootstrap 4 and Django 2.0.1 on windows 10?
Tristen Edwin (1 year ago)
My nav bar won't go vertical mine is smushed together horizontally
Tristen Edwin (1 year ago)
The other thing that's so great about this tutorial is that you show how to do it independent of an IDE. I was worried I was going to have to pay for Pycharm pro in order to work with css
Jigar Patel (1 year ago)
"well bs-sidebar affix" doesn't work. I tried adding some text to the main page and scrolling down, but the pills don't hold their position. Any suggestions? Thank You!
Karl Ritchie (1 year ago)
The Bootstrap download doesn't have fonts anymore.
Karl Ritchie (1 year ago)
Google it, https://www.w3schools.com/html/default.asp is a good place to start. If you want you can download the files from the tutorial and get the old bootstrap with fonts.
Ben Bull (1 year ago)
can you send me a link to the documentation plz? like a specific page where it suggests what to do.
Karl Ritchie (1 year ago)
I edited the HTML myself. I finally got a website up & running but its best reading documentation.
Ben Bull (1 year ago)
have you figured a way around this?
hrithik auchar (1 year ago)
The bootstrap that I downloaded has no fonts file....
Ben Bull (1 year ago)
have you figured a way around this?
Eduard Crisan (1 year ago)
PLEASE HELP I followed this tutorial very precisely. I created the 'personal' folder and I moved the bootstrap files inside. But the webpage does not change, and when I try to access the stylesheet from the source code(CTRL+U) i get the 404 page with the message : 'personal\css\bootstrap.min.css' could not be found Can someone help me fix this problem, please?
Crypto Rootz (11 months ago)
yea im having thew same problem...
Joshua Furman (1 year ago)
I have the same problem and I added the STATICFILES_DIR to my settings.py and it still isn't working for me
Eduard Crisan (1 year ago)
Adel Shahin glad I could help!
Adel Shahin (1 year ago)
thanks, i had the same problem and you solved it for me
Eduard Crisan (1 year ago)
UPDATE I added the following line to settings.py and it works STATICFILES_DIR = ('/personal/static',)
Amir Firoozi (1 year ago)
Hi, First of all, thanks for your tutorial. I have an issue when I use "{% load static %}" get an exception: Encountered unknown tag 'load'. Please help me, I couldn't find in the internet. Thanks
kenna Gutema (1 year ago)
I am trying to put a link in the 'blog' but it isn't recognizing. Any help ?
kenna Gutema (1 year ago)
when is the 'include' folder created ? what's in there ?
Hello, Sentdex. I have a problem. When i write <link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}" type='text/css' /> on header.html on my hosting bootstrap not work, but if i do it on local server its ok. What i must do?
Rahul chauhan (1 year ago)
Well elaborated content dude. But tell me one thing ,Is this possible to add any html ,css code in the header.html file,because if it is then it baecome very easier to maintain our website and easily formatted.
Arnab Raychaudhuri (1 year ago)
I ran the same program in the header.html but in my website the 'home' 'blog' 'contact' are coming in the same line and there is no line break. How to solve this problem ? thanks
Sean Reiness (1 month ago)
I changed the class line before the navs (mentioned at @19:20) to <ul class="nav flex-column"> pick whatever class you want! https://getbootstrap.com/docs/4.2/components/navs/
Mazhar Hossain (3 months ago)
use flex-column instead nav-stacked
berk cinar (3 months ago)
the same problem
king of Random (3 months ago)
i had same problem, do you get the solution to that if yes, please tell me
Erfan Taghvaei (1 year ago)
Hey dude ! Can you share your thoughts on Bitcoin ?
Erfan Taghvaei (1 year ago)
Thanks a lot man ! Your the coolest !
sentdex (1 year ago)
I recently did: https://www.youtube.com/watch?v=JgxpGBQz4mU&lc=Ugx1BFLwHYy5u-N7Ei94AaABAg
Ahrdie Ramirez (1 year ago)
the Navbar does'nt stay in place as i scroll, It does'nt work on Google Chrome, But in Opera Browser it works.
Brendan Milton (1 year ago)
You are an incredible teacher, you should literally start your own certified python programming degree! You'd make a fortune!
Tranculent (1 year ago)
When I download bootstrap, its version is 4.0.0. I do not have bootstrap.min.css.In fact, I do not have any css directory.I have scss though, which maybe an replacement for css but I cannot find the file that can replace the bootstrap.min.css used in the video hence I cannot design my webpage. Any help would be appreciated!
Swarnabh Kashyap (10 months ago)
i don't have the font directory?
Manuel Lsoa (1 year ago)
Its there. go to dist ->css then u will see bootstrap.min.css
Abhishek Ravikumar (1 year ago)
same here
Alexander Teusz (1 year ago)
my header.html doesn´t load the js from bootstrap. i got a navbar with a dropdown, but this dropdown doesn´t work. any idea ?
richtan (1 year ago)
great video
abdurahman mohamed (1 year ago)
thanks tutor, but i changed the image still shows your image, i copied the header.html code in my header but the image does not gone why
Ram Kasyap (1 year ago)
For some reason I am not able to see any of the contents from home.html which JINJA should include, also Home, Blog and Contact elements are not appearing as list elements, they are just mushed together next to one another.
V k (1 year ago)
Navigation pills are not stacked. Instead they appear in a line what might be the problem.
Clint Street (1 year ago)
Hi, thank you very much for this tutorial! I have an issue, when I place my css inside the /static/personal directory it cannot find the css anymore. I have changed the header file to <link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type="text/css"/> Everything works if I leave it as "css/bootstrap.min.css" and move the files to the /static folder. Any suggestions on how to get this working?
Tobias (1 year ago)
For future reference: - In Bootstrap 4 the class "nav-stacked" must be replaced with "flex-column". - All <li> elements must have the class "nav-item" added to them. - All <a> elements must have the class "nav-link" added to them. See https://getbootstrap.com/docs/4.0/components/navs/ for an explanation of the classes.
Abdullah Shafin (10 months ago)
tried it just now, this solution still works as of 4 April 2018
Dan Smith (11 months ago)
you sir are a gentleman and a saint, just saved me having to dig through documentation to find this!
Jiefan Yang (11 months ago)
Red Fox11 (1 year ago)
Thank you :D
Amit Sahu (1 year ago)
Nice one buddy
yash vaidya (1 year ago)
nav nav-pills nav-stacked not working any fix???
Shritam Kumar Mund (8 months ago)
Thank you so much for the help. Before I see your comment down here, I never gave up and tried all, that are in the Bootstrap official website. Hahaha.. eventually I learned so many things about bootstrap. Great help:)
Lautaro Parada (1 year ago)
Great help. I have solved the same issue, thank you!!
Mohit Pratap Singh (1 year ago)
thanks for the help.. kudos to u :)
Tobias (1 year ago)
I've used Bootstrap v4.0, and then it didn't work. See this link for a fix https://getbootstrap.com/docs/4.0/components/navs/ Basically they've changed the css-classes a bit so instead of "nav-stacked" you must use "flex-column", and then add the class "nav-item" to each <li> element and "nav-link" to each <a> element. Then it worked for me, although it doesn't work exactly like in the tutorial. But I guess they've changed the standard behaviour of navbar links. Hope it helps.
Shay Patrick Cormac (1 year ago)
2:04 i don't know y but "get started" part was so funny
Kishan Patel (1 year ago)
Hello i have doubt What i have to put in html href of a tag to connect with header files
albertbeccu (1 year ago)
I could not get the links to be in order. Don't know if it's due to some Bootstrap error, or I'm doing it wrong somehow. Either way, they kept ending up on the same line with that code for some reason (I copied it from the studies page), so I replaced, on row 44-48: <ul class="nav nav-pills nav-stacked"> <li><a href='/'>Home</a></li> <li><a href='/blog/'>Blog</a></li> <li><a href='/contact/'>Contact</a></li>  </ul> with...  <nav class="nav flex-column">        <a class="nav-link active" href="/">Home</a>        <a class="nav-link" href="/Blog/">Blog</a>        <a class="nav-link" href="/Contact/">Contact</a>         </nav> Which fixed it. All else is the same, even the <div class sidebar code. Hope I don't run into problems in the next tutorials! Also THANK YOU for all these tutorials - they have helped me learn a lot! :-)
Hurley Wales (2 months ago)
Came back to the vid for the answer to this problem, thanks for posting! Worked perfect for me.
Diego Piscoya (2 months ago)
+Noman Ahmad i did this but the buttons don't get shaded when the cursor is over them :/
Noman Ahmad (5 months ago)
I found the solution from https://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3 . your ul line should be like that <ul class="nav nav-pills nav-stacked col-md-3">
Kundai Musindo (5 months ago)
same here was there an update on bootstrap or something??
naruto Kim (5 months ago)
Thank you
Ged McGinley (1 year ago)
Hi to get the pills to work as per the video use Bootstrap 3.3.7 and rather than have your static file pointing toward bootstrap.min.css point it towards bootstrap.css.  Worked for me.  Great tutorials btw!
Philip Lebios (1 year ago)
hi, I got problem of my Home, blog and contact. the output was not the same in the video. please see link below for screenshot. http://prntscr.com/gadlnw
Shlok Motwani (11 months ago)
+Khursheed Ali: Thanks buddy. Worked for me!
Khursheed Ali (1 year ago)
me too replace by : <ul class="nav nav-pills flex-column"> <li class ='nav-item'><a class = "nav-link" href='/'>Home</a></li> <li class="nav-item"><a class = "nav-link" href='/blog/'>Blog</a></li> <li class="nav-item"><a class = "nav-link" href='/contact/'>Contact</a></li> </ul>
Raghavendra Bellala (1 year ago)
me too.. Did anyone notice the same?
istiaq ullah (1 year ago)
why windows 7 and notepad++? why not a unix based operating system and a decent text-editor? btw awesome videos! love them!
ALEXEIS (1 year ago)
Django couldn't get any easier with you. Thanks
sentdex (1 year ago)
Great to hear, happy to help :D
borislav todorov (1 year ago)
thank you for making these vids
Talula Clark (1 year ago)
sentdex, quick question, my page has the Home, Blog, Contact links in the sidebar all bunched up on each other. They don't look like yours? Any quick fix?
berk cinar (3 months ago)
it works !!!!!!
Nahuel Varela Blanco (5 months ago)
On point!
Hola Hola (5 months ago)
<ul class="nav nav-pills nav-stacked col-md-3"> It works for me.
Hola Hola (5 months ago)
For some reason, It is not working for me,
Hola Hola (5 months ago)
It works on Mac, Thank you.
Percentexz (1 year ago)
Holly fuck, all I did was wanna make a website. Great info though
zdes nikovo (1 year ago)
Typo at 13:18. You typed in "tpye" instead of "type"
Jason Schnereger (1 year ago)
I love the way you teach man. Very normal and chill. It's like pair programming with a really kind and understanding dev. Thank you so much for sharing all your knowledge with the world :)
Rieven Martis (1 year ago)
You got a new subscriber! You explain things very simple, not boring and with a passion for it. Just great!
Prabhakar Kevat (1 year ago)
Fuck WIX!!
Sriram R (1 year ago)
I like materialize css better than bootstrap. It gives amazing visuals and responsiveness too
Sriram R (1 year ago)
sentdex thats awesome. materialize is like the best of both worlds
sentdex (1 year ago)
I've been using materialize now for quite a while as well. If/when I re-do this series, we'll almost certainly not be using bootstrap.
thehartkrusher (1 year ago)
If anyone else got stuck up on loading the css i had to add this to my settings.py BASE_DIR = os.path.dirname(os.path.dirname(__file__)) STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, '../static') STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.AppDirectoriesFinder', 'django.contrib.staticfiles.finders.FileSystemFinder', )
Ismail Yushaw (1 year ago)
hello if i can get your attention regarding the globe map you showed on your site. i want to make something like that. if you can make a tut on that I will be very delighted. thank you
Neel Patel (1 year ago)
lots of thanks to making all Python tutorials. you are awesome. !!!
Josephine (1 year ago)
I had to watch some of the videos more than once to get it to work but now i've finally caught up. Thank you!
Ermal Abiti (1 year ago)
in this tutorial i finally learned how to stick the footer to the bottom, which i could never learn from the many other front-end tutorials
sanchit bansal (1 year ago)
i am on ubuntu and couldnt load the website and was getting error to set debug to false and when i did that i am getting error 500 since
antony mathews (1 year ago)
css file is shown in network but its not implemented inside program
Ben Bull (1 year ago)
i'm having the same problem, did u fix this?
gaurav kumar (1 year ago)
my footer is not coming down all the way height is 100% ( as shown in the link) it just starts the moment navigational box ends
lm5050 (1 year ago)
I had to add STATIC_ROOT to settings to direct where to exactly find the static folder on my desktop/server

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.