How to use Bootstrap with Django

Bootstrap is the best CSS framework for websites. If you want to use Bootstrap on your Django project, you need to understand how Django templates work, you can refer to post Working with django templates before reading this further.

Post Working with django templates will give you basic understanding you need for this post, if you are already familiar with how django template inheritance work, you can continue with this post.

In this post we will create this Bootstrap 4 template using Django

 

As you can see, we have following three components

  • header
  • navbar
  • content
  • footer

Header, navbar and footer section will remain constant across websites. We will use template inheritance and include tags for building this web page.

Here is my folder structure

├── db.sqlite3
├── manage.py
├── mysite04
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── polls
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __pycache__
│   │   └── __init__.cpython-36.pyc
│   ├── models.py
│   ├── __pycache__
│   │   ├── admin.cpython-36.pyc
│   │   ├── apps.cpython-36.pyc
│   │   ├── __init__.cpython-36.pyc
│   │   ├── models.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── static
│   │   └── polls
│   │   ├── css
│   │   │   ├── bootstrap-solid.svg
│   │   │   └── pricing.css
│   │   ├── img
│   │   │   ├── favicons
│   │   │   │   ├── apple-touch-icon.png
│   │   │   │   ├── browserconfig.xml
│   │   │   │   ├── favicon-16x16.png
│   │   │   │   ├── favicon-32x32.png
│   │   │   │   ├── favicon.ico
│   │   │   │   ├── manifest.json
│   │   │   │   └── safari-pinned-tab.svg
│   │   │   └── tiger-beside-green-plants-standing-on-brown-land-during-145899.jpg
│   │   └── js
│   ├── templates
│   │   └── polls
│   │       ├── base.html
│   │       ├── fifth.html
│   │       ├── footer.html
│   │       ├── fourth.html
│   │       ├── head.html
│   │       ├── navbar.html
│   │       ├── second.html
│   │       ├── sixth.html
│   │       └── third.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py

Here we have created base template and overriding templates using the logic explained inWorking with django templates . We need lots of static files while working with Bootstrap, check the post Working with Django Static files to understand how to work with static files. We have copied css, svg, img files using static files. We have also used couple of CDN based js and css files. you can find complete code at mysite04 github repository

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.