How To Use Bootstrap Templates In Django

Thales Bruno

Posted on Jul 15, 2020 • Updated on May 9, 2021

Django + Bootstrap: Basic setup

This is the English version of my second article here at dev.to.

The purpose is to create a basic setup of a Django project integrated with Bootstrap and Font Awesome, which tin be the base of your projects. If you want to check out the whole code:

Create the Django projection

Showtime of all, we create the project root directory

            ~:              $                            mkdir              project ~:              $                            cd              project/

And so, nosotros set a Python virtual environment called venv where we will install the dependencies of our project. We activate it and install Django. Code below.

            ~/project:              $              python3              -g              venv venv ~/project:              $                            source              venv/bin/activate              (venv)              ~/projection:              $              pip              install              Django

Django installed, the next step is to create a Django project. Nosotros create a src/ directory and run the django-projection command within it. We called the project core and the dot indicates we are edifice information technology in the current directory.

                          (venv)              ~/project:              $                            mkdir              src              (venv)              ~/project:              $                            cd              src/              (venv)              ~/project/src:              $              django-admin startproject core              .

Now we create two more directories: static, where we will put the Bootstrap and Font Awesome files, and templates, where we will put our HTML template files.

                          (venv)              ~/project/src:              $                            mkdir              static templates

Ready to run the Django service. For that, nosotros offset apply the migrations (for the default applications Django comes with, similar admin, auth, etc.), and so run the server.

                          (venv)              ~/project/src:              $              python manage.py migrate              (venv)              ~/project/src:              $              python manage.py runserver

If everything went well the service must exist accessible at http://127.0.0.one:8000.

Bootstrap and Font-awesome integration

So, with the Django project congenital, we integrate Bootstrap and Font Awesome sources on it.

Bootstrap

In the Bootstrap Downloads page, nosotros chose Compiled CSS and JS, ready-to-use compiled code. It's the first option on the spider web page.

We unzip the bundle and re-create its ii directories js and css to the directory /projection/src/static/ in our project. Almost in that location, before leaving this step we remove all unnecessary files in the js and css folders. Nosotros only go along with bootstrap.min.js and bootstrap.min.js.map in the js, and with bootstrap.min.css and bootstrap.min.css.map in the css.

Font-crawly

With Django and Bootstrap integrated we already have a pretty adept setup, just we can besides integrate with Font Awesome every bit the icing on the block.

In the Font Awesome official website, we download its Free Bundle on this link.

We create a fa subdirectory on our project /project/src/static/fa/ then nosotros unzip the Font Awesome package and re-create the webfonts and css folders there. We also remove unnecessary files in /projection/src/static/fa/css, keeping simply the all.min.css.

Integrating everything

The final step is integrating everything.

We edit the /project/src/core/settings.py file, adding a line with a relative reference to the static directory.

                          STATICFILES_DIRS              =              [              os              .              path              .              join              (              BASE_DIR              ,              'static'              )]

In the same file, we too edit the department about TEMPLATES, specifically its DIR value to the following:

                          TEMPLATES              =              [              {              # -- some code upward there --                            'DIRS'              :              [              os              .              path              .              join              ((              BASE_DIR              ),              'templates/'              )],              # -- some code down there

Views and URLs

Before creating templates, we do some logic stuff.

In Django, nosotros map all the URLs our awarding serves in the urls.py file. So, we create an URL on the root that, when accessed, call a view, i.due east. a office within views.py, which is who will be handling the request and rendering the result page to the user.

urls.py file:

                          from              django.contrib              import              admin              from              django.urls              import              path              from              .views              import              index              urlpatterns              =              [              path              (              'admin/'              ,              admin              .              site              .              urls              ),              path              (              ''              ,              index              ),              ]

views.py file:

                          from              django.shortcuts              import              render              def              index              (              asking              ):              render              return              (              asking              ,              'index.html'              ,              {})

At this point, nosotros but need an alphabetize.html template file.

Templates

The very terminal step, I swear, is creating the index.html file. We create information technology from the scratch at the templates directory, and we use Jinja template language.

At the get-go of the file, we load the static files.

            {% load static %}

In the head HTML department we put the references to the CSS and JS files.

                          <link              rel=              "stylesheet"              href=              "{% static 'css/bootstrap.min.css' %}"              >              <link              rel=              "stylesheet"              href=              "{% static 'fa/css/all.min.css' %}"              >              <script                            src=              "{% static 'js/bootstrap.min.js' %}"              ></script>

Well done! We are ready to write HTML lawmaking using Bootstrap and Font Awesome as a visual blueprint! In the GitHub repository of this projection, we can see an index.html sample already using some Bootstrap components, which seems similar this:

Django and Bootstrap generic page