How to integrate MDBootstrap with Django?

Published 28.12.2018 Updated 10.01.2019

Bartłomiej Malanowski pro posted 4 weeks ago

Since I've met MDBootstrap three years ago, I've tried to integrate it with a lot of technologies. Some of them were WordPress, LaravelHapi.js or even Apache PhoneGap. Recently, I was thinking about integrating MDB with one of my favorites - Django.

What is Django?

Django is a framework built with Python. It allows creating advanced projects extremely fast. Django has a lot of cool features built-in. Thousands of developers also create their own plugins that make the Django-based projects even better. It can be used everywhere - as a simple blog, professional online store or - thanks to Django Rest Framework - this can also run your own API.

Getting started

Before we get started, we need to install a couple of things. For the first, make sure you have Python 3 installed on your computer. If you wish to use Python 2 - feel free to do that. Personally, I prefer py3. I'm running Mac OS High Sierra, so I already have Python 3 installed. If you're not sure if you have it too, open terminal and type:

python3 -V

For me, the result is "Python 3.7.0". If you don't have a Python 3 installed, you'll find a guide dedicated to your operating system here.

The next step is installing virtualenv. Virtualenv is a tool that allows you to create isolated Python environments. It means you can use totally different packages or even different python versions for each project. To install Virtualenv, in your terminal simply type:

pip install virtualenv

After then you can create your first virtualenv. For the first, you need to obtain your Python location:

Obtain Python's location

As you can see, for me the Python 3 location is /usr/local/bin/python3 so I'm gonna finally create my virtualenv by typing:

virtualenv -p /usr/local/bin/python3 env

Once the virtualenv was created, we need to activate it:

source env/bin/activate

Notice that your command prompt has changed - the (env) was added to the start of it. This means you've activated your environment properly and you can work with your project now. If you want to turn it off, just use the command `deactivate`.

Now, we gonna install Django. To do that, run: 

pip install Django

Starting the Django project

So far, we've created our virtual env and installed the Django framework. Now, we can finally create our first project! Again, back to your terminal and type:

django-admin startproject mysite

You should see that Django has automatically created the directory structure that looks like this:

mysite/
├── manage.py
└── mysite
    ├── __init__.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

What are these files?

  • The top directory named mysite/ is a container for our project
  • manage.py is a CLI utility that allows interacting with our Django project
  • The second (inner) mysite/ it's actually our project. This is where we store our whole Django configuration
  • mysite/__init__.py is empty, but the important file. It's information that this directory is a package is a Python package
  • In mysite/settings.py, you can find mentioned settings for our project
  • mysite/urls.py controls the URL declarations of our Django project
  • mysite/wsgi.py is an entry-point for web servers. We won't focus on it right now

By cd mysite open the newly-created project in your terminal. Now we'll verify if our Django bases projects actually work. To do that, run the following command:

python manage.py runserver

 If everything is well, you should see the following result:

Performing system checks...

System check identified no issues (0 silenced).

You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

December 19, 2018 - 09:20:52
Django version 2.1.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

As you can see, there's a message that says about unapplied migrations, but don't worry. That's normal for new projects. The message will be visible every time you type the "runserver" command until you do a migration. What's important - Django has started the server on the address http://127.0.0.1:8000/. Please try to open this address in your browser. As a result, you should see a screen that looks like this: 

Starting the first app

Now, we need to create an app, but hey - didn't we've just created an app yet? No, we didn't. We've started a new project. What's the difference? A project is like a kind of wrapper for our all apps. We can't start a new project inside a project, but we can create as many apps inside project as we want. For testing purpose, we'll call our app "posts" so in your console run the command:

python manage.py startapp posts

As a result, Django created new files for us so now the directory tree should look like this:

mysite/
├── manage.py
├── mysite
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── posts
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

If your directory tree looks like this, go to mysite/settings.py and find the section named INSTALLED_APPS. At the end of this array add entry 'posts'.

Creating the first view

Now it's time to create our first view! Before we do that, in the posts directory we need to create a new directory that names templates. Then, in the newly-created directory, create an HTML file. You can call it anyhow you want. For this article, I've named it "index.html". Now paste the following code to your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My MDB Django Project</title>
</head>
<body>
<h1>MDBootstrap loves Django</h1>
</body>
</html>

Now, go to posts/views.py and add the following code there:

from django.shortcuts import render

def index(request):
  return render(request, 'index.html')

And then, go to mysite/urls.py. As I've mentioned earlier, this file controls every URL in your Django project. We need to modify it a little bit. For the first, we need to import our view:

from posts.views import index

And add it to the patterns array:

urlpatterns = [
  ...
  path('', index)
]

A few words of explanation: On the path, I used an empty string. It's because I want my index to be rendered on the root URL, but you can type anything you want there. 

Make sure that everything is saved and then on your browser open http://127.0.0.1:8000/. You should see the following content:

As you can see, the template is working well, but it doesn't look like Material Design. Well, it doesn't even look like a website. To make it beautiful, we'll add MDBootstrap to our project!

Adding MDBootstrap to your project

We're almost done! After all this configuration we can finally add MDBootstrap to our project!

The fastest way to do that is using CDN. Bootstrap, jQuery, and Popper use CDN and thanks to cdnjs, MDBootstrap also can be reached using CDN.

Let's modify our HTML file. I've just updated my index.html so you can just copy the code below and paste to your template file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My MDB Django Project</title>

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/css/mdb.min.css" rel="stylesheet">
</head>
<body>

<div style="height: 100vh">
<div class="flex-center flex-column">
<h1 class="animated fadeIn mb-4">MDBootstrap loves Django <i class="fa fa-heart red-text"></i></h1>
</div>
</div>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Material Design for Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/js/mdb.min.js"></script>

<script>
new WOW().init();
</script>
</body>
</html>

When you refresh your browser, this time the result should be nicer than before:

It's so much better, right?

The other way

You might ask "hey, I'm a pro user, how can I use MDB Pro in my Django project?". That's a great question. Currently, MDB doesn't offer CDN for its premium versions, but that's not a problem. Just go back to your project and inside your posts directory create a new one and name it static. Then, copy the content of the MDB package to the static directory. Now go back to the index.html file. We need to modify it again. The first thing you need to do is add the following code just before the CSS imports in the HTML file:

{% load static %}

Now, replace:

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/css/mdb.min.css" rel="stylesheet">

With:

 <!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="{% static 'css/mdb.min.css' %}" rel="stylesheet">

And then, do the same with the JavaScript files:

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<!-- Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Material Design for Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.16/js/mdb.min.js"></script>

Should be replaced with:

<!-- jQuery -->
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>

<!-- Popper.js -->
<script src="{% static 'js/popper.min.js' %}"></script>

<!-- Bootstrap -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- Material Design for Bootstrap -->
<script src="{% static 'js/mdb.min.js' %}"></script>

 

Now, restart your server. When you run it again, the result should be the same as previously. Also if you're an MDB Pro user, you've got some superpowers that come from MDB Pro package. Let's try some MDB Pro features in our project. For making sure that everything is working, we'll try to implement one of the hardest components from MDB - the Lightbox. In your browser go to mdbootstrap.com and on the side nav, click on JavaScript and then on the LightBox.

Find an example that you like and copy-paste its HTML code to your template file. Now, in your editor scroll down to the end and after mdb.js add the following code:

$(function () {
  $("#mdb-lightbox-ui").load("{% static 'mdb-addons/mdb-lightbox-ui.html' %}");
});

Now save it and refresh your browser. As you can see everything is working well!

If your site is looking like the screenshot above, you can be proud of yourself - you've just integrated MDB with the Django project!

 

You can find a full code from this tutorial here on my GitHub repository

costa commented 2 weeks ago

Hi, 

Could you tell me how you implemented this part:

"inside your posts directory create a new one and name it static. Then, copy the content of the MDB package to the static directory"


Bartłomiej Malanowski pro commented 2 weeks ago

It's simple. Inside "posts" manually create a directory named "static". Then, copy-paste files from MDB package to the static directory


costa commented 2 weeks ago

It is working, thank you. 

How about the form? MDB contact form is created in PHP language. Can I use django instead ?


Bartłomiej Malanowski pro commented a week ago

Yes, you can use Django as well to send e-mails from your site. I think that would be a nice idea for the next article ;) 


costa commented 6 days ago

Hi, 

I cant load the static files. It gives me this error:

[16/Jan/2019 21:39:41] "GET /static/css/style.css HTTP/1.1" 404 1663

My static file is in the same place as my template folder is. 

Do you know what can I do ?


Bartłomiej Malanowski pro commented 5 days ago

What's your directory tree?


Joash King commented 2 weeks ago

Hi,

Can you show us how to integrate MDB react with Django Rest API.


Bartłomiej Malanowski pro commented a week ago

Of course, I can ;) Do you have any idea how would you like to use DRF with MDB?


Please insert min. 20 characters.
Details of the article
  • Category: jQuery
  • Specification: MDB jQuery, Django