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

Bootstrap HTML CSS - Django Web Development with Python 4

1651 ratings | 217540 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 (326)
Steve Zubrowski (13 days ago)
Never knew about the devices option in Chrome's developer tools. Awesome! This whole video was super helpful.
Leong Kar Wan (19 days ago)
agp22888 (30 days ago)
WHOA!!! Telekinesis typing at 13:17!
Harikeshav Rameshkumar (1 month ago)
I dont have a fonts folder
hector alvarado (1 month ago)
I´m trying to integrate frameworks like angular or react to django, any suggestions for doing that?
Tudor Cozma (2 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 (2 months ago)
Thank you
itsmejuju (2 months ago)
Late reply, but it's located in the video description: https://pythonprogramming.net/design-bootstrap-django-python-tutorial/
E MA (3 months ago)
26minutes, this is scare.
Magikk (3 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 (23 days ago)
THANK YOU!!! I was getting so frustrated!
amit pant (3 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 (3 months ago)
The feeling that you think your the next Mark Zuckerberg by just bringing up this simple site !
Ajqualix (4 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 (4 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 (4 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 (4 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 (1 month 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 (3 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 (4 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 (5 months ago)
Thanks for the video man! Needed this
ijazz jazz (5 months ago)
Thanks for the video visit our website https://bit.ly/2MdYZSp
Sandy Leon (5 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 (5 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 (5 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 (5 months ago)
I think that you have to modify the last line in /mysyte/settings.py
Jaime Fernandez (6 months ago)
Awesome videos.
Wayne Hong (6 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 (6 months ago)
Great tutorial, but I have a question ,how can I upload an image from my computer by using django ?
Asif Khan (6 months ago)
can we use html file generated from Abode Muse
Asif Khan (6 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 (6 months ago)
Great Tutorials!
sentdex (6 months ago)
Mostafa Ibrahim (6 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 (7 months ago)
Dude I'm here and I know CDN ! Bye now ! You aren't for me then.
chris mahn (7 months ago)
python manage.py runserver --insecure will allow static files to display otherwise they will be blocked.
Mũ Bạc (8 months ago)
14:59 where is the code
fuaddi syah rahman amin (8 months ago)
can we using bootstrap on admin page ??
Dalton P (8 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 (4 months ago)
At the top of which page? Sorry, can you be more specific?
Muhammad Shoaib (8 months ago)
by placing static word in path it is not working..is it issue in main setting file?
computerScienceAndFangs (8 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 (8 months ago)
Thank you for the course
Tayeb SAADI (8 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 (8 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 (8 months ago)
python 4 ?????????????????????
Dan Stoian (9 months ago)
Love it!
Vinod Reddy (9 months ago)
could you please post HTML code here
jian deng (9 months ago)
the ctrl+click method to open tabs is the trick
harinder mushiana (9 months 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 (10 months 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
404SubscribersNotFound (10 months ago)
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 (10 months ago)
My nav bar won't go vertical mine is smushed together horizontally
Tristen Edwin (10 months 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 (10 months 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 (10 months ago)
The Bootstrap download doesn't have fonts anymore.
Karl Ritchie (10 months 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 (10 months ago)
can you send me a link to the documentation plz? like a specific page where it suggests what to do.
Karl Ritchie (10 months ago)
I edited the HTML myself. I finally got a website up & running but its best reading documentation.
Ben Bull (10 months ago)
have you figured a way around this?
hrithik auchar (10 months ago)
The bootstrap that I downloaded has no fonts file....
Ben Bull (10 months ago)
have you figured a way around this?
Eduard Crisan (10 months 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 (8 months ago)
yea im having thew same problem...
Joshua Furman (9 months 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 (9 months ago)
Adel Shahin glad I could help!
Adel Shahin (9 months ago)
thanks, i had the same problem and you solved it for me
Eduard Crisan (10 months ago)
UPDATE I added the following line to settings.py and it works STATICFILES_DIR = ('/personal/static',)
Amir Firoozi (10 months 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 (10 months ago)
I am trying to put a link in the 'blog' but it isn't recognizing. Any help ?
kenna Gutema (10 months 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 (10 months 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 (10 months 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
Mazhar Prince (10 days ago)
use flex-column instead nav-stacked
berk cinar (24 days ago)
the same problem
king of Random (28 days ago)
i had same problem, do you get the solution to that if yes, please tell me
Erfan Taghvaei (10 months ago)
Hey dude ! Can you share your thoughts on Bitcoin ?
Erfan Taghvaei (10 months ago)
Thanks a lot man ! Your the coolest !
sentdex (10 months ago)
I recently did: https://www.youtube.com/watch?v=JgxpGBQz4mU&lc=Ugx1BFLwHYy5u-N7Ei94AaABAg
Ahrdie Ramirez (11 months 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 (7 months ago)
i don't have the font directory?
Manuel Lsoa (11 months 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 (7 months ago)
tried it just now, this solution still works as of 4 April 2018
Dan Smith (8 months ago)
you sir are a gentleman and a saint, just saved me having to dig through documentation to find this!
Jiefan Yang (8 months ago)
Red Fox11 (10 months ago)
Thank you :D
Amit Sahu (11 months ago)
Nice one buddy
yash vaidya (1 year ago)
nav nav-pills nav-stacked not working any fix???
Shritam Kumar Mund (5 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 (10 months 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! :-)
Noman Ahmad (2 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 (2 months ago)
same here was there an update on bootstrap or something??
naruto Kim (2 months ago)
Thank you
DjmMik (2 months ago)
Same here. Kind of makes me worried about using this bootstrap thing
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 (8 months ago)
+Khursheed Ali: Thanks buddy. Worked for me!
Khursheed Ali (11 months 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 (24 days ago)
it works !!!!!!
Nahuel Varela Blanco (2 months ago)
On point!
E MA (3 months ago)
<ul class="nav nav-pills nav-stacked col-md-3"> It works for me.
E MA (3 months ago)
For some reason, It is not working for me,
E MA (3 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
al Khwarismi (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 (10 months 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
Majdi Kallel (1 year ago)
didn't work for me.. I had to add the line below to settings to get it work. STATICFILES_DIR = ('/personal/static',) It would be great if somewone could explain why it didn't work without it. BTW Thanks for great tutorials, keep up the great work ;)
E (8 months ago)
Saram Iqbal thank you sir!
Saram Iqbal (1 year ago)
Late reply but hope it helps.. I'm assuming your using django 1.11 which was used at the time of your comment. Include the following in your settings .py file : STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static") ] What this does is tells the django where to look. Also make sure that django.contrib.staticfiles is included in your installed apps. finally add this to your settings .py : STATIC_URL = '/static/' I hoped this resolved your issue as i know that errors can be a pain in the butt. Be sure to always read the docs when in doubt. https://docs.djangoproject.com/en/1.11/howto/static-files/
Onur Boyar (1 year ago)
just use /static/
John Tete (1 year ago)
thank you for this video very clear and concise instructions I was just wondering whether I could have a templates and static folder in my project folder so I could reuse the templates for all the apps I create rather than customizing the styles and html for one single app.
Thames Khi (1 year ago)
note it's type not tpye
jmy joker (1 year ago)
Hello, can you tell me that where is your source code, i wanna watch it.Thanks!
sentdex (1 year ago)
Saurabh Kumar (1 year ago)
sir can you please elaborate why did you created another personal folder inside that static folder? please reply sir
ZvXGamer (1 month ago)
The documentation was an example that used a certain directory to browse to the profile picture. So, when we copy and paste the code we have to follow the code or edit the code to follow our directory
Laura Barluzzi (1 year ago)
If I understood is for the same reason of templates. The Django framework somewhat can access all files in templates/ and static/ folders, despite in which app these folders are located. This way, for instance, if you reference to an image 'static' file 'cover.jpeg' that happens to exist in two different apps Django may get confused in which one you're referring to (the one from app1 or app2..?) To avoid this problem, you can reference uniquely to each document (despite their name) adding a 'app folder' path that refers to the current 'app name' (that surely is not repeated, as you surely have control on not calling two apps the same way). In this case you reference to 'app1/cover.jpeg' and this way Django is not confused on where to go as the path is unique. Hopefully I got it right and this was helpful.
Thames Khi (1 year ago)
It is for namespace purposes. https://docs.djangoproject.com/en/1.10/howto/static-files/ Static file namespacing Now we might be able to get away with putting our static files directly in my_app/static/ (rather than creating another my_app subdirectory), but it would actually be a bad idea. Django will use the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the easiest way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.
Chichikn (1 year ago)
Yeah that's my question too. Hmm
samuel Mahal (1 year ago)
I love watching your tutorials at 2x speed, so much faster, but you sound a little like a chipmonk :)<|>K
Felix Iaccarino (1 year ago)
can i use bootstrap without having anything of javascript? i prefer to not use source i cant see. Is that possible in this tutorial? thanks
kwstas kar (1 year ago)
i dont understand the purpose of having home.html passing information to header.html. Header files supposed to have all includes bootstrap etc and navigation bar. You could make footer.html containing footer and then passing these on the home/index.html right ? Also throwing bootstrap folder in static folder is it good ?Why not making folder called bootstrap_files and throw them in there?
kwstas kar (1 year ago)
nevermind i figured it out
Cristian Cardoso (1 year ago)
If someone is using WSGI module, then you have to create a Alias /static/ /var/mywebsite/static and a directory. :)

Would you like to comment?

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