Quick & Dirty Django Drag & Drop Bootstrap Build with Layoutit.com
Tags: django, bootstrap, tutorial, python
Published: 2019-10-26 11:56:41


**Yay Alliteration**

## Things you should know.

1. I'm new to Django, I.e. not an expert.
2. These are instructions for a brand new Django project. I'm making a tutorial re: adding views to an existing project with this method, but I'm not there yet. In the meantime- get clever, I believe in you.
3. Re: static files, if you're going to deploy this project to production the [DjangoProject](https://docs.djangoproject.com/en/2.2/howto/static-files/) says "*This method is grossly inefficient and probably insecure, so it is unsuitable for production.*" SO. See [here](https://docs.djangoproject.com/en/2.2/howto/static-files/deployment/) for 
 resolution.
4. Probably doesn't need to be said, but just in case: `name_of_project`/`name_of_app` show up repeatedly and need to be replaced with your own deeply creative alternatives.
4. Django 2+
5. Bootstrap 4+

## Helpful Sites

- [DjangoProject.com "Writing your first Django app"](https://docs.djangoproject.com/en/2.2/intro/tutorial01/)
- https://docs.djangoproject.com/en/2.2/

## Getting to the **Point** Already

0. [Virtual Environment](https://realpython.com/python-virtual-environments-a-primer/) (I recommend this, but I'm not the cops- do what you like.)
1. `pip install django django-bootstrap4`
2. `django-admin startproject name_of_project`
3. `cd name_of_project`
4. `python manage.py startapp name_of_app`
5. Create `name_of_app/templates/name_of_app`
6. Create `name_of_app/static/name_of_app`
7. Make required changes to `name_of_app/settings.py`
    - Add entry to `INSTALLED_APPS`: `'name_of_app.apps.NameOfAppConfig',`
    - Add entry to `TEMPLATE`'s `OPTIONS` dict, using content in [related section below](#7).
8. Make optional changes to `name_of_app/settings.py`
    - [DATABASES](https://docs.djangoproject.com/en/2.2/ref/settings/#databases)
    - `TIME_ZONE`
9. `python manage.py migrate`
10. Build layout at [Layoutit](https://www.layoutit.com/), download, and unzip.
11. Copy `layoutit_dir/layout/src/index.html` to `name_of_project/name_of_app/templates/name_of_app`.
12. Copy the css/fonts/js dirs in `layoutit_dir/layout/src` to `name_of_project/name_of_app/static/name_of_app`.
13. Create `base.html` in `name_of_app/templates/name_of_app`, fill w/ content from [related section below](#13).
14. Open `name_of_app/templates/name_of_app/index.html`, make replacements  in [related section below](#14).
15. Open `name_of_app/views.py` and add a view using content from [related section below](#15).
16. Create `name_of_app/urls.py` and fill with content from [related section below](#16).
17. Open `name_of_project/urls.py` and:
    - Add `include` to the `django.urls` import (E.g. `from django.urls import include, path`)
    - Add import `from name_of_app import views`
    - Add path to urlpatterns list: `path('name_of_app/',include('name_of_app.urls'))`
18. `python manage.py runserver`
19. Open browser to http://localhost:8000/name_of_app/

### 8. [`TEMPLATE`][`OPTIONS`] Entry <a name="7"></a>

```python
            'builtins': [
                'django.contrib.staticfiles.templatetags.staticfiles',
            ],
```

I.e.

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'builtins': [ ### NEW ENTRY ###
                'django.contrib.staticfiles.templatetags.staticfiles',
            ],
        },
    },
]
```

### 14. `base.html` <a name="13"></a>

```html
{% load static %}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'name_of_app/css/style.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'name_of_app/css/bootstrap.min.css' %}" type="text/css">
</head>

<body>
    {% block content %}{% endblock %}
</body>

</html>
```

### 15. `index.html` Replacements <a name="14"></a>

**Replace**

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 4, from LayoutIt!</title>

    <meta name="description" content="Source code generated using layoutit.com">
    <meta name="author" content="LayoutIt!">

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>
```

**With**

```html
{% extends 'name_of_app/base.html' %}

{% block content %}
```

**Then Replace**

```html
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>
```

**With**

```html

<script src="{% static 'name_of_app/js/jquery.min.js' %}"></script>
<script src="{% static 'name_of_app/js/bootstrap.min.js' %}"></script>
<script src="{% static 'name_of_app/js/scripts.js' %}"></script>
{% endblock %}
```

### 16. `views.py` Method <a name="15"></a>

```python
from django.shortcuts import render

def index(request):
    # gather data
    # model_class = Model.objects....

    # create context
    context = {}

    return render(request,'name_of_app/index.html',context)
```

### 17. `urls.py` <a name="16"></a>

```python
from django.urls import path

from . import views

app_name = 'name_of_app'
urlpatterns = [
    path('',views.index,name='index')
]
```

![](https://i.giphy.com/media/3o6fJbVyV1d4QhVXjO/source.gif)