Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Style With Bootstrap
In this lesson, you’ll add some style to you website in a beginner-friendly way with Bootstrap. If you make a few simple changes, you can make some great visual impact on your site.
Go back to the template you already created, remove the heading, and copy in some HTML. It doesn’t really matter what the HTML is. Right now, your site is just plain HTML.
00:00 Hey, and welcome to this new video where we’re going to add a little bit of good style to our website in a simple way. We’re going to use Bootstrap for that. Bootstrap is a whole different story, so I’m not going to go into it too deeply, but I’m just going to show you the effects that a very simple change can have on your website. So, heading over to our app, this is inside of the template that we created before.
00:25 I just took away the heading that we had in there and copied some HTML. It doesn’t really matter what this HTML is, that’s just for exemplifying what Bootstrap can do.
00:36 I took this from the Bootstrap website, so it’s a Bootstrap example that already has all the classes defined in there, but this could just be whatever HTML you are writing.
00:47 If I head over to this, this is how the site currently looks like. It’s plain HTML. You can see the text is not very interesting. We have the images in there, just placeholder images.
00:59 But it doesn’t look good, right? So, what we can do with Bootstrap is you can include the CSS file that, essentially, styles everything that you need from Bootstrap very simply. So, you just get this link. It’s a bit difficult to see here, but just copy-paste this link to a content delivery network, and then you head back over
01:22
to your template and inside of the <head> of your template, this is where you’re going to place this one line of code, okay? So, it’s a link, you can see, to a "stylesheet".
01:33 It’s a CSS stylesheet, but this one lives on a link, like online, on HTTPS, blah, blah, blah, blah, okay. There you see it’s a CSS file, and then we have some integrity stuff— don’t worry about that much.
01:47 What it’s telling you is it’s linking to a CSS stylesheet that’s provided by Bootstrap. And now, when I hit back over to the site and reload it, it looks a whole lot different and a whole lot better.
02:00 That’s all because the Bootstrap styling gets applied to the HTML that’s sitting over there in our template. So, whatever you would have in here—you can get rid of all of this, just to give you an example…
02:20 and go back to what we had before.
02:30 Let’s take a look how this looks like if we don’t have Bootstrap included
02:38 and reload that. Simple HTML, simple rendering.
02:45 And then if I add Bootstrap, you’re not going to see as many changes as before, but you can see that already, this gets applied. We have a different font, that’s easier to read, and that’s all the style that we have so far.
02:57 But go ahead and dive into Bootstrap. They’ve got great documentation and you can learn about what are the different classes that you can apply in order to make your content look much nicer.
03:10
For example, you can do this—see, there’s great examples always there. You could add a <div class="alert">, make it yellow, "alert-warning".
03:39 And as a result, now it looks like that. That’s only because I have Bootstrap included. For a final check, take this away and reload the page. None of this gets applied. All right, so, include Bootstrap, learn a bit about it, read in their excellent documentation, and you’re going to have a good way of quickly styling your website to make it much nicer to look at and, yeah, look like a modern website.
04:10
All that with just a simple link in the <head> of your templates. Okay, that’s all for styling for this project. If you want to learn more about front end web development, there’s a lot you can do, obviously, but this is not the focus of this course, so I will just leave it at that for now.
reblark on Oct. 22, 2019
The bootstrap link is impossible to copy and the getbootstrap site has changed.
Martin Breuss RP Team on Oct. 23, 2019
There’s actually no need to scroll and select the whole line, you can simply click on the “Copy” button that appears when you hover over the top-right corner of the code window. This will copy everything the whole line for you.
Give it a go here in the CSS section..
LJIN Lab on March 28, 2020
I’m following this series sequentially, so I don’t know if you mention it later or not, but how would you add custom styling to your django projects? Would you need to have different stylesheets for different template folders or can you just have one file for all static styling?
Martin Breuss RP Team on March 28, 2020
Hi @LJIN Lab. You can have only one stylesheet for your whole project, or multiple ones for different apps. Check out Managing Static Files in the Django docs for more info.
In short:
- settings: Adapt the settings to declare your static files folder
- static: Create a
static/folder in your app that obeys the double-folder structure, and place your CSS file in there - templates: You still need to do
{% load static %}and use the template tag for linking - collectstatic: Finally, you need to run
python manage.py collectstaticfor Django to pull all the static resources from all folders and put them into one place to rule them all
Hope that helps. Static files can sometimes be a bit tricky in Django, especially in deployment, but that’s just somewhere in the twisted nature of web development ¯\_(ツ)_/¯
LJIN Lab on March 29, 2020
@Martin Breuss, thank you so much for such quick response! Really appreciate it. I hope you stay safe amidst this pandemic. Thank you again for great content.
Martin Breuss RP Team on March 29, 2020
Thank you, and happy to help. Stay safe as well! 🧼🏠
MB on July 16, 2020
I added a free bootstrap template but the server is returning errors such as -
Not Found: /projects/assets/vendor/remixicon/remixicon.css
Not Found: /projects/assets/vendor/icofont/icofont.min.css
Not Found: /projects/assets/vendor/owl.carousel/assets/owl.carousel.min.css
Not Found: /projects/assets/vendor/bootstrap/css/bootstrap.min.css
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/owl.carousel/assets/owl.carousel.min.css HTTP/1.1" 404 2781
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 2754
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/remixicon/remixicon.css HTTP/1.1" 404 2730
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/icofont/icofont.min.css HTTP/1.1" 404 2730
Not Found: /projects/assets/vendor/venobox/venobox.css
Not Found: /projects/assets/vendor/boxicons/css/boxicons.min.css
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/boxicons/css/boxicons.min.css HTTP/1.1" 404 2748
Not Found: /projects/assets/css/style.css
Not Found: /projects/assets/vendor/jquery.easing/jquery.easing.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/css/style.css HTTP/1.1" 404 2679
Not Found: /projects/assets/vendor/jquery/jquery.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/venobox/venobox.css HTTP/1.1" 404 2718
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/jquery.easing/jquery.easing.min.js HTTP/1.1" 404 2763
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/jquery/jquery.min.js HTTP/1.1" 404 2721
Not Found: /projects/assets/vendor/bootstrap/js/bootstrap.bundle.min.js
Not Found: /projects/assets/vendor/php-email-form/validate.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 2769
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/php-email-form/validate.js HTTP/1.1" 404 2739
Not Found: /projects/assets/vendor/counterup/counterup.min.js
Not Found: /projects/assets/img/me.jpg
Not Found: /projects/assets/vendor/venobox/venobox.min.js
Not Found: /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/counterup/counterup.min.js HTTP/1.1" 404 2739
[16/Jul/2020 13:12:49] "GET /projects/assets/img/me.jpg HTTP/1.1" 404 2670
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js HTTP/1.1" 404 2763
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/venobox/venobox.min.js HTTP/1.1" 404 2727
Not Found: /projects/assets/vendor/owl.carousel/owl.carousel.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/owl.carousel/owl.carousel.min.js HTTP/1.1" 404 2757
Not Found: /projects/assets/vendor/waypoints/jquery.waypoints.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/waypoints/jquery.waypoints.min.js HTTP/1.1" 404 2760
Not Found: /projects/assets/vendor/jquery.easing/jquery.easing.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/jquery.easing/jquery.easing.min.js HTTP/1.1" 404 2763
Not Found: /projects/assets/img/testimonials/testimonials-2.jpg
Not Found: /projects/assets/img/testimonials/testimonials-1.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/testimonials/testimonials-2.jpg HTTP/1.1" 404 2745
[16/Jul/2020 13:12:49] "GET /projects/assets/img/testimonials/testimonials-1.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/testimonials/testimonials-3.jpg
Not Found: /projects/assets/js/main.js
[16/Jul/2020 13:12:49] "GET /projects/assets/img/testimonials/testimonials-3.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/testimonials/testimonials-4.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/js/main.js HTTP/1.1" 404 2670
Not Found: /projects/assets/img/testimonials/testimonials-5.jpg
Not Found: /projects/assets/vendor/php-email-form/validate.js
[16/Jul/2020 13:12:49] "GET /projects/assets/img/testimonials/testimonials-5.jpg HTTP/1.1" 404 2745
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/php-email-form/validate.js HTTP/1.1" 404 2739
[16/Jul/2020 13:12:49] "GET /projects/assets/img/testimonials/testimonials-4.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/portfolio/portfolio-1.jpg
Not Found: /projects/assets/img/portfolio/portfolio-2.jpg
Not Found: /projects/assets/img/portfolio/portfolio-3.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-2.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-1.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-4.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-3.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-5.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-4.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-5.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-6.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-6.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-7.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-7.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-9.jpg
Not Found: /projects/assets/img/portfolio/portfolio-8.jpg
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-9.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/vendor/waypoints/jquery.waypoints.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/img/portfolio/portfolio-8.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/waypoints/jquery.waypoints.min.js HTTP/1.1" 404 2760
Not Found: /projects/assets/vendor/counterup/counterup.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/counterup/counterup.min.js HTTP/1.1" 404 2739
Not Found: /projects/assets/vendor/owl.carousel/owl.carousel.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/owl.carousel/owl.carousel.min.js HTTP/1.1" 404 2757
Not Found: /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js HTTP/1.1" 404 2763
Not Found: /projects/assets/vendor/venobox/venobox.min.js
[16/Jul/2020 13:12:49] "GET /projects/assets/vendor/venobox/venobox.min.js HTTP/1.1" 404 2727
Not Found: /projects/assets/js/main.js
[16/Jul/2020 13:12:50] "GET /projects/assets/js/main.js HTTP/1.1" 404 2670
[16/Jul/2020 13:12:52] "GET /projects/ HTTP/1.1" 200 32834
Not Found: /projects/assets/vendor/boxicons/css/boxicons.min.css
Not Found: /projects/assets/vendor/owl.carousel/assets/owl.carousel.min.css
Not Found: /projects/assets/vendor/icofont/icofont.min.css
Not Found: /projects/assets/css/style.css
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/boxicons/css/boxicons.min.css HTTP/1.1" 404 2748
Not Found: /projects/assets/vendor/bootstrap/css/bootstrap.min.css
Not Found: /projects/assets/vendor/remixicon/remixicon.css
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/owl.carousel/assets/owl.carousel.min.css HTTP/1.1" 404 2781
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/icofont/icofont.min.css HTTP/1.1" 404 2730
[16/Jul/2020 13:12:52] "GET /projects/assets/css/style.css HTTP/1.1" 404 2679
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 2754
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/remixicon/remixicon.css HTTP/1.1" 404 2730
Not Found: /projects/assets/vendor/venobox/venobox.css
[16/Jul/2020 13:12:52] "GET /projects/assets/vendor/venobox/venobox.css HTTP/1.1" 404 2718
Not Found: /projects/assets/vendor/jquery/jquery.min.js
Not Found: /projects/assets/vendor/waypoints/jquery.waypoints.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/jquery/jquery.min.js HTTP/1.1" 404 2721
Not Found: /projects/assets/vendor/jquery.easing/jquery.easing.min.js
Not Found: /projects/assets/vendor/bootstrap/js/bootstrap.bundle.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/waypoints/jquery.waypoints.min.js HTTP/1.1" 404 2760
Not Found: /projects/assets/vendor/php-email-form/validate.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/jquery.easing/jquery.easing.min.js HTTP/1.1" 404 2763
Not Found: /projects/assets/vendor/counterup/counterup.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 2769
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/php-email-form/validate.js HTTP/1.1" 404 2739
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/counterup/counterup.min.js HTTP/1.1" 404 2739
Not Found: /projects/assets/vendor/owl.carousel/owl.carousel.min.js
Not Found: /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/owl.carousel/owl.carousel.min.js HTTP/1.1" 404 2757
Not Found: /projects/assets/img/me.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js HTTP/1.1" 404 2763
[16/Jul/2020 13:12:53] "GET /projects/assets/img/me.jpg HTTP/1.1" 404 2670
Not Found: /projects/assets/img/testimonials/testimonials-1.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/testimonials/testimonials-1.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/vendor/jquery.easing/jquery.easing.min.js
Not Found: /projects/assets/vendor/venobox/venobox.min.js
Not Found: /projects/assets/js/main.js
Not Found: /projects/assets/img/testimonials/testimonials-3.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/venobox/venobox.min.js HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/jquery.easing/jquery.easing.min.js HTTP/1.1" 404 2763
Not Found: /projects/assets/img/testimonials/testimonials-2.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/js/main.js HTTP/1.1" 404 2670
[16/Jul/2020 13:12:53] "GET /projects/assets/img/testimonials/testimonials-3.jpg HTTP/1.1" 404 2745
[16/Jul/2020 13:12:53] "GET /projects/assets/img/testimonials/testimonials-2.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/testimonials/testimonials-4.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/testimonials/testimonials-4.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/testimonials/testimonials-5.jpg
Not Found: /projects/assets/vendor/php-email-form/validate.js
Not Found: /projects/assets/img/portfolio/portfolio-4.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/testimonials/testimonials-5.jpg HTTP/1.1" 404 2745
Not Found: /projects/assets/img/portfolio/portfolio-1.jpg
Not Found: /projects/assets/img/portfolio/portfolio-3.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-4.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/php-email-form/validate.js HTTP/1.1" 404 2739
Not Found: /projects/assets/img/portfolio/portfolio-2.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-1.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-3.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-2.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-7.jpg
Not Found: /projects/assets/img/portfolio/portfolio-5.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-5.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/img/portfolio/portfolio-6.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-7.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/vendor/waypoints/jquery.waypoints.min.js
Not Found: /projects/assets/img/portfolio/portfolio-8.jpg
Not Found: /projects/assets/img/portfolio/portfolio-9.jpg
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-6.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-9.jpg HTTP/1.1" 404 2727
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/waypoints/jquery.waypoints.min.js HTTP/1.1" 404 2760
[16/Jul/2020 13:12:53] "GET /projects/assets/img/portfolio/portfolio-8.jpg HTTP/1.1" 404 2727
Not Found: /projects/assets/vendor/counterup/counterup.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/counterup/counterup.min.js HTTP/1.1" 404 2739
Not Found: /projects/assets/vendor/owl.carousel/owl.carousel.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/owl.carousel/owl.carousel.min.js HTTP/1.1" 404 2757
Not Found: /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/isotope-layout/isotope.pkgd.min.js HTTP/1.1" 404 2763
Not Found: /projects/assets/vendor/venobox/venobox.min.js
[16/Jul/2020 13:12:53] "GET /projects/assets/vendor/venobox/venobox.min.js HTTP/1.1" 404 2727
Not Found: /projects/assets/js/main.js
[16/Jul/2020 13:12:53] "GET /projects/assets/js/main.js HTTP/1.1" 404 2670
Martin Breuss RP Team on July 17, 2020
Hi @MB, this is probably related to how you added Bootstrap to your app, but I can’t say much more without additional information. Here are some things for you to look out for and decide about:
- Using A CDN: If you don’t need to include the Bootstrap code within your app, then let Bootstrap host it for you and you connect to it. That’s the easiest way to get Bootstrap styling into your app and works like this
- Self-Hosting: If you do want to include the full Bootstrap code in your app, it’ll be a bit more difficult. But also here there are easier and more involved options:
- As a Package: Install a package from
pipthat helps with Bootstrap-Django integration, e.g. django-bootstrap4 - As a Download: The most complicated way is probably to download the source files and include it into your project manually, which might be what you were trying to do. For this, you need to make sure the file structure is set up correctly and that Django will be able to discover all the assets used to make Bootstrap work properly. If you want to give it a go, this article on Integrating Bootstrap to Django might be helpful
- As a Package: Install a package from
Hope this helps and all the best! My tip: Keep it simple and use a CDN. This will be the best choice in most situations.
eramandeep04 on April 2, 2021
Good tutorial.. Can you please go more deeper in django core.. In some other tutorial?
Become a Member to join the conversation.
reblark on Oct. 18, 2019
I have been using BBedit for my text editor and I have had a great deal of trouble with it because of the double folder. It seems to get confused by it and not recognized the unique path name but just looks at the file name. Anybody else have that problem?