Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

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.

Comments & Discussion

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?

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 collectstatic for 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! 🧼🏠

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 pip that 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

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.

Become a Member to join the conversation.