{"id":5793,"date":"2020-02-21T10:31:28","date_gmt":"2020-02-21T09:31:28","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=5793"},"modified":"2023-08-30T10:49:24","modified_gmt":"2023-08-30T08:49:24","slug":"build-a-dashboard-with-django-and-bootstrap-part-1","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-1\/","title":{"rendered":"Django | Build a Dashboard with Django and Bootstrap: Part 1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This is Part 1 of <em>Building a Dashboard with Django  and Bootstrap<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Part 1: Building a base Django project<\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-2\/\">Part 2: Prepare for dynamic content<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-3\/\">Part 3: Handling navigation and the side menu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.via-internet.de\/en\/build-a-dashboard-with-django-and-bootstrap-part-4\/\">Part 4: Deploy Django App to Azure<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Building a complete web app isn&#8217;t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don&#8217;t using tools or framework, which helps and makes our life easier. <a href=\"https:\/\/www.djangoproject.com\/\"><gwmw class=\"ginger-module-highlighter-mistake-type-1\" id=\"gwmw-15824465754606598455505\">Django<\/gwmw><\/a> is one of these frameworks:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1\" id=\"gwmw-15824468379037630016661\">Django<\/gwmw> is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">So, let&#8217;s get started.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create project<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For subsequent steps, we will remember our starting directory <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f DASHBOARD_ROOT=$(pwd)\n\u276f echo $DASHBOARD_ROOT\n... here you will see your current folder...<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">First step is to create our main Django project<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f django-admin startproject dashboard\n\u276f mv dashboard project\n\u276f cd project\n\u276f python manage.py migrate<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f python manage.py runserver 8080\n...\n\nStarting development server at http:\/\/127.0.0.1:8080\/\nQuit the server with CTRL-BREAK.<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">View current project in browser<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"782\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-1024x782.png\" alt=\"\" class=\"wp-image-9675\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-1024x782.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-300x229.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-768x587.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-1536x1173.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_005-2048x1564.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Create first apps<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f mkdir -p apps\/core\n\u276f python manage.py  startapp Core apps\/core\n\n\u276f mkdir -p apps\/frontend\n\u276f python manage.py startapp Frontend apps\/frontend<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The folder structure should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"970\" height=\"436\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-initial-folder-structure-1.png\" alt=\"\" class=\"wp-image-9690\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-initial-folder-structure-1.png 970w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-initial-folder-structure-1-300x135.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-initial-folder-structure-1-768x345.png 768w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add new apps to project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Modify name in <code>apps\/core\/apps.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class CoreConfig(AppConfig):\n    default_auto_field = 'django.db.models.BigAutoField'\n    name = 'apps.core'<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Modify name in <code>apps\/frontend\/apps.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"3\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">class FrontendConfig(AppConfig):\n    default_auto_field = 'django.db.models.BigAutoField'\n    name = 'apps.frontend'<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Modify <code>dashboard\/settings.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">INSTALLED_APPS = [\n   ...\n\n    'apps.core',\n    'apps.frontend',\n]<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Modify <code>dashboard\/urls.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.contrib import admin\nfrom django.urls import path\n\nimport apps.frontend.views as views\n\nurlpatterns = [\n    path('', views.IndexView.as_view(), name='index'),\n    path('admin\/', admin.site.urls),\n]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create view<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Modify view in <code>apps\/frontend\/views.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django.shortcuts import render\nfrom django.views import generic\n\n\nclass IndexView(generic.TemplateView):\n    \"\"\"\n    IndexView:\n    \"\"\"\n    module = 'indexView'\n    template_name = 'frontend\/index.html'<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Create template for frontend View<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create template file <code>apps\/frontend\/templates\/frontend\/index.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>\nFrontend: Let's get started\n&lt;\/h1><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Add template folder to configuration<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In <kbd>dashboard\/settings.py<\/kbd>, add template folder to TEMPLATES<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"4\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">TEMPLATES = [\n    {\n        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n        'DIRS': [BASE_DIR \/ 'templates'],\n]<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">View current project in browser<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"186\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/build_a_dashboard_with_django_006-2.png\" alt=\"\" class=\"wp-image-8442\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/build_a_dashboard_with_django_006-2.png 624w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/build_a_dashboard_with_django_006-2-300x89.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Current folder Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">So far, we have the following folder structure<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"690\" height=\"982\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-folder-structure-001.png\" alt=\"\" class=\"wp-image-9691\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-folder-structure-001.png 690w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-folder-structure-001-211x300.png 211w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Prepare for administrate your project<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Create admin user<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f python manage.py createsuperuser\nUsername (leave blank to use 'user'): admin\nEmail address: admin@localhost\nPassword: \nPassword (again): \nSuperuser created successfully.<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add Bootstrap support<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Download requires files for Bootstrap, jQuery and PopperJS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Or download <a href=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2021\/10\/static.zip\">this <\/a>prepared archiv and unzip the files unter <code>dashboard<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Run the scripts in <kbd>$DASHBOARD_ROOT<\/kbd><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hint: You need to install <a href=\"https:\/\/learn.microsoft.com\/en-us\/powershell\/scripting\/install\/installing-powershell?view=powershell-7.3\" data-type=\"link\" data-id=\"https:\/\/learn.microsoft.com\/en-us\/powershell\/scripting\/install\/installing-powershell?view=powershell-7.3\">PowerShell<\/a> before running the scripts.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">> cd $DASHBOARD_ROOT\n> .\/download_bootstrap.ps1\n> .\/download_jquery.ps1\n> .\/download_popperjs.ps1<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><kbd>download_bootstrap.ps1<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#!\/usr\/bin\/env pwsh\n\n$ROOT = Split-Path -Parent $PSSCRIPTROOT\n\n$global:ProgressPreference  = 'SilentlyContinue'  \n$response = Invoke-WebRequest https:\/\/getbootstrap.com\/ \n$downloadlink = $response.links | Where-Object { $_.href -like \"*download\/\" } | foreach-object { $_.href } | select-object -first 1 \n$downloadpage = Invoke-WebRequest https:\/\/getbootstrap.com$downloadlink\n\n$dist_download_url = $downloadpage.links | where-object { $_.href -like \"*-dist.zip\" } | foreach-object { $_.href }\n$dist_version      = $dist_download_url.split(\"\/\")[-2].replace(\"v\",\"\")\n$dist_zip          = \"$ROOT\\${dist_version}.zip\"\n\nWrite-Host \"Download $dist_zip from $dist_download_url\"\nInvoke-WebRequest $dist_download_url -O $dist_zip\n\nWrite-Host \"Unpack to assets\\vendor\\bootstrap\\${dist_version}\"\n\n$fldr_bootstrap = \"project\\dashboard\\static\\assets\\vendor\\bootstrap\"\n\nif (Test-Path -Path $fldr_bootstrap) {\n    Remove-Item -recurse -force           $fldr_bootstrap\n}\n\nNew-Item -type directory                  $fldr_bootstrap > $null \nExpand-Archive $dist_zip -destinationpath $fldr_bootstrap\n\nMove-Item $fldr_bootstrap\\bootstrap* $fldr_bootstrap\\${dist_version}\n\n$global:ProgressPreference  = 'Continue'\n\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><kbd>download_jquery.ps1<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#!\/usr\/bin\/env pwsh\n\n$ROOT = Split-Path -Parent $PSSCRIPTROOT\n\n$version = \"3.7.0\"\n\n$url_base = \"https:\/\/code.jquery.com\"\n\n$destination = \"project\\dashboard\\static\\assets\\vendor\\jquery\\$version\\js\"\n\nWrite-Host \"Prepare  destination $destination\"\nif (Test-Path -Path $destination) {\n    Remove-Item -recurse -force           $destination > $null\n}\n\nNew-Item -type directory                  $destination > $null \n\nInvoke-WebRequest $url_base\/jquery-${version}.js      -O $destination\/jquery-${version}.js\nInvoke-WebRequest $url_base\/jquery-${version}.min.map -O $destination\/jquery-${version}.min.map<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><kbd>download_popperjs.ps1<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"powershell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#!\/usr\/bin\/env pwsh\n\n$ROOT = Split-Path -Parent $PSSCRIPTROOT\n\n$version = \"2.11.8\"\n\n$url_base = \"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/${version}\/umd\/\"\n\n$destination = \"project\\dashboard\\static\\assets\\vendor\\popperjs\\$version\\js\"\n\nWrite-Host \"Prepare  destination $destination\"\nif (Test-Path -Path $destination) {\n    Remove-Item -recurse -force           $destination > $null\n}\n\nNew-Item -type directory                  $destination > $null \n\nInvoke-WebRequest $url_base\/popper.js -O  $destination\/popper.js<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Finally, the folder structure should look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"660\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_008.png\" alt=\"\" class=\"wp-image-9679\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_008.png 474w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/build_a_dashboard_with_django_008-215x300.png 215w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Create site templates in <code>dashboard\/templates\/site<\/code><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">Add templates path to <gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3\" id=\"gwmw-15824470508427730698282\">settings<\/gwmw><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashboard\/settings.py<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"5\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">TEMPLATES = [\n    {\n        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n        'DIRS': [\n            BASE_DIR \/ '\/dashboard\/templates',\n        ],\n        ...<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-2\" id=\"gwmw-15824470715450370185521\">Add static<\/gwmw> path to <gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-3\" id=\"gwmw-15824470715451132153545\">settings<\/gwmw><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashboard\/settings.py<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Add as first line<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">import os<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then add \/ replace at <kbd>STATIC_URL=...<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"2-4\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">STATIC_URL = 'static\/'\nSTATICFILES_DIRS = [\n    os.path.join(BASE_DIR, 'dashboard\/static')\n]<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Modify frontend view template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashboard\/apps\/frontend\/templates\/index.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n{\n{\n{\n\n{\n&lt;main>\n\t&lt;div class=\"p-5 mb-4 bg-body-tertiary rounded-3\">\n\t\t&lt;div class=\"container-fluid py-5\">\n\t\t\t&lt;h1 class=\"display-5 fw-bold\">Custom jumbotron&lt;\/h1>\n\t\t\t&lt;p class=\"col-md-8 fs-4\">Using a series of utilities, you can create this jumbotron, just like the one in\n\t\t\t\tprevious versions of Bootstrap. Check out the examples below for how you can remix and restyle it to\n\t\t\t\tyour liking.&lt;\/p>\n\t\t\t&lt;button class=\"btn btn-primary btn-lg\" type=\"button\">Example button&lt;\/button>\n\t\t&lt;\/div>\n\t&lt;\/div>\n\t&lt;\/div>\n&lt;\/main>\n{\n\n\n\n<p class=\"wp-block-paragraph\">File <kbd>dashboard\/apps\/frontend\/templates\/site\/base.html<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n&lt;!DOCTYPE html>\n&lt;html>\n\n&lt;head>\n    &lt;title>{\n    &lt;link rel=\"stylesheet\" href=\"{\n&lt;\/head>\n\n&lt;body>\n\n    &lt;nav class=\"navbar navbar-expand-md navbar-dark bg-dark mb-4\">\n        &lt;div class=\"container-fluid\">\n          &lt;a class=\"navbar-brand\" href=\"#\">Navigation&lt;\/a>\n          &lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n            &lt;span class=\"navbar-toggler-icon\">&lt;\/span>\n          &lt;\/button>\n          &lt;div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">\n            &lt;ul class=\"navbar-nav me-auto mb-2 mb-md-0\">\n              &lt;li class=\"nav-item\">&lt;a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home&lt;\/a>&lt;\/li>\n              &lt;li class=\"nav-item\">&lt;a class=\"nav-link\" href=\"polls\">Polls&lt;\/a>\n              &lt;\/li>\n            &lt;\/ul>\n          &lt;\/div>\n        &lt;\/div>\n      &lt;\/nav>\n\n    &lt;div class=\"container\">\n        {\n        {\n    &lt;\/div>\n\n    &lt;script src=\"{\n&lt;\/body>\n\n&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">View current status of project<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"778\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-1024x778.png\" alt=\"\" class=\"wp-image-9682\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-1024x778.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-300x228.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-768x583.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap-1536x1167.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2023\/08\/10_base_app_with_bootstrap.png 1714w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Final Result<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The final result could be found <a href=\"https:\/\/github.com\/r14r\/Django_Dashboard-with-Django-and-Bootstrap\/tree\/main\/project\" data-type=\"link\" data-id=\"https:\/\/github.com\/r14r\/Django_Dashboard-with-Django-and-Bootstrap\/tree\/main\/project\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add dashboard from an existing template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For a first start, we will use this <a href=\"https:\/\/startbootstrap.com\/previews\/sb-admin-2\/\"><gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1\" id=\"gwmw-15824470188863680783027\">sb<\/gwmw>-admin-2 dashboard<\/a> template from <a href=\"https:\/\/github.com\/BlackrockDigital\/startbootstrap-sb-admin-2\">here<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"870\" src=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard.png\" alt=\"\" class=\"wp-image-5886\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard.png 1000w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-300x261.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-768x668.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Download required files<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap templates consist of at least 3 different types of files<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>main index.html page, responsible for collection all elements and set up your page<\/li>\n\n\n\n<li>CSS files defining the style of your page<\/li>\n\n\n\n<li>JavaScript files, containing needed frameworks and code<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">So, first start by downloading the sample template from <a href=\"https:\/\/github.com\/BlackrockDigital\/startbootstrap-sb-admin-2\">here<\/a>. Be sure, you start in our project root folder:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f cd $DASHBOARD_ROOT<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f git clone https:\/\/github.com\/BlackrockDigital\/startbootstrap-sb-admin-2 install\/sb-admin-2\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Next, find out, what we need for our template in addition to the file <kbd>index.html<\/kbd><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,2\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\u276f cd install\/sb-admin-2\n\u276f grep -E \"&lt;(link|script)\" index.html | grep -E \"(href|src)=\"<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1,2\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">  &lt;link href=\"vendor\/fontawesome-free\/css\/all.min.css\" rel=\"stylesheet\" type=\"text\/css\">\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i\" rel=\"stylesheet\">\n  &lt;link href=\"css\/sb-admin-2.min.css\" rel=\"stylesheet\">\n  &lt;script src=\"vendor\/jquery\/jquery.min.js\">&lt;\/script>\n  &lt;script src=\"vendor\/bootstrap\/js\/bootstrap.bundle.min.js\">&lt;\/script>\n  &lt;script src=\"vendor\/jquery-easing\/jquery.easing.min.js\">&lt;\/script>\n  &lt;script src=\"js\/sb-admin-2.min.js\">&lt;\/script>\n  &lt;script src=\"vendor\/chart.js\/Chart.min.js\">&lt;\/script>\n  &lt;script src=\"js\/demo\/chart-area-demo.js\">&lt;\/script>\n  &lt;script src=\"js\/demo\/chart-pie-demo.js\">&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s a lot of additional files.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To keep the file structure consistent, these files should be stored under the <kbd>dashboard\/static<\/kbd> folder (same as the bootstrap files before).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve this, there are <gwmw class=\"ginger-module-highlighter-mistake-type-2\" id=\"gwmw-15824469384628631344488\">two possi<\/gwmw>bilities:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create desired folder and copy each of the source files to the destination folder<\/li>\n\n\n\n<li><gwmw class=\"ginger-module-highlighter-mistake-type-1\" id=\"gwmw-15824469457060378385283\">Copy<\/gwmw> the complete static folder from the <a href=\"https:\/\/github.com\/r14r\/Django_Dashboard-with-Django-and-Bootstrap\">Github Repository<\/a> for this post.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">We use the second option to keep the focus on creating our dashboard.<gwmw style=\"display:none;\"><\/gwmw><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, first, clone the repository:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd $DASHBOARD_ROOT\/install\nhttps:\/\/github.com\/r14r\/Django_Dashboard-with-Django-and-Bootstrap<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then, copy the requred files<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cd $DASHBOARD_ROOT\n\ncp -R install\/Django_Dashboard-with-Django-and-Bootstrap\/project\/dashboard\/static project\/dashboard<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cp -R install\/Django_Dashboard-with-Django-and-Bootstrap\/project\/dashboard\/templates dashboard<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Having everything needed for the dashboard template, the next step is to modify the front-end template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashboard\/apps\/frontend\/templates\/frontend\/index.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"1\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n{\n\n{\n{\n\n\n\n<h3 class=\"wp-block-heading\">View current project in browser<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"870\" src=\"https:\/\/i1.wp.com\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/61_dashboard.png?fit=700%2C609&amp;ssl=1\" alt=\"\" class=\"wp-image-5886\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard.png 1000w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-300x261.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/61_dashboard-768x668.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Perfect. We are done with the basic setup.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Still some work to do, because our dashboard is only a static dashboard. All content is programmed in the dashboard template file <code>dashboard\/templates\/site\/<gwmw class=\"ginger-module-highlighter-mistake-anim ginger-module-highlighter-mistake-type-1\" id=\"gwmw-15824468928077326673877\">sb<\/gwmw>-admin-2\/base.html<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, look at the cards with the earnings at the top:<\/p>\n\n\n\n<figure class=\"wp-block-table alignwide\"><table><tbody><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"168\" class=\"wp-image-5890\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui.png 552w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_ui-300x101.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"154\" class=\"wp-image-5888\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX.png 1334w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-300x93.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-1024x316.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_monthly_codeX-768x237.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><tr><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"168\" class=\"wp-image-5889\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui.png 554w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_ui-300x101.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><td><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"158\" class=\"wp-image-5891\" style=\"width: 500px;\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code.png\" alt=\"\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code.png 1320w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-300x95.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-1024x323.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/71_static_data_earnings_annual_code-768x242.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To achieve a more dynamic content, we need to move the desired parts of the dashboard from the template file to the front-end view file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This will be described in the next step: <a href=\"https:\/\/blog.via-internet.de\/en\/blog\/2020\/02\/21\/build-a-dashboard-with-django-and-bootstrap-part-2\">Part 2: Prepare for dynamic content<\/a><\/p>\n\n\n\n<!--nextpage-->\n\n\n\n<h2 class=\"wp-block-heading\">Additional Steps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Add dashboard from bootstrap example template<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Get Javascript libraries<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">DST=dashboard\/static\/vendor\nURL=https:\/\/cdnjs.cloudflare.com\/ajax\/libs\n\nmkdir ${DST}\/feather\/4.9.0\/js\nwget -q ${URL}\/feather-icons\/4.9.0\/feather.min.js -O ${DST}\/feather\/4.9.0\/js\/feather.min.js\n\nmkdir ${DST}\/\/chart\/2.7.3\/js\nwget -q ${URL}\/Chart.js\/2.7.3\/Chart.min.js -O ${DST}\/chart\/2.7.3\/js\/Chart.min.js<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Resulting file structure<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"414\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_libs.png\" alt=\"\" class=\"wp-image-5851\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_libs.png 250w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_libs-181x300.png 181w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Get Bootstrap sources with examples<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">BOOTSTRAP_VER=4.4.1\nBOOTSTRAP_ZIP=https:\/\/github.com\/twbs\/bootstrap\/archive\/v${BOOTSTRAP_VER}.zip\nBOOTSTRAP_DST=dashboard\/static\/vendor\/bootstrap\/4.4.1\n\nrm -rf  install\/bootstrap\nmkdir -p  install\/bootstrap\nwget -q ${BOOTSTRAP_ZIP} -O install\/bootstrap\/${BOOTSTRAP_VER}.zip\n\nrm -rf ${BOOTSTRAP_DST}\/bootstrap-${BOOTSTRAP_VER} \nmkdir -p ${BOOTSTRAP_DST}\/\n\nunzip -q install\/bootstrap\/${BOOTSTRAP_VER} -d install<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Examine and study examples<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">All examples from the getbootstrap.com website are located in <code>install\/bootstrap-4.4.1\/site\/docs\/4.4\/examples<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"1075\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_examples.png\" alt=\"\" class=\"wp-image-5838\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_examples.png 436w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_examples-122x300.png 122w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/31_folder_structure_of_examples-415x1024.png 415w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Copy template files to django project folders<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the css stylesheet<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cp install\/bootstrap-4.4.1\/site\/docs\/4.4\/examples\/dashboard\/dashboard.css  dashboard\/static\/site\/css\/<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the javascript file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cp install\/bootstrap-4.4.1\/site\/docs\/4.4\/examples\/dashboard\/dashboard.js dashboard\/static\/site\/js<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Copy html file <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">cp install\/bootstrap-4.4.1\/site\/docs\/4.4\/examples\/dashboard\/index.html  dashboard\/templates\/site\/dashboard.html <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After this, we should have the following files in folders:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"592\" src=\"https:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/32_files_for_dashboard_template.png\" alt=\"\" class=\"wp-image-5844\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/32_files_for_dashboard_template.png 272w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/32_files_for_dashboard_template-138x300.png 138w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">find dashboard -name \"dashboard*\" -type f\ndashboard\/static\/site\/css\/dashboard.css\ndashboard\/static\/site\/js\/dashboard.js\ndashboard\/templates\/site\/dashboard.html<\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Final Step: modify <code>site\/base.html<\/code> template<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">The dashboard.html template file from the bootstrap examples contains only the required html for the dashboard itself.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What we need to add is the information, where the stylesheets and the javascript files (including bootstrap itself) are located.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The base structure for a template file using bootstrap (or any other UI \/ layout framework) looks like this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>starting with a header, specifying meta information and links for the used css files<\/li>\n\n\n\n<li>following the main part, containing the information display on the website<\/li>\n\n\n\n<li>end up the the information, where the javascript files are located<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The resulting template should look like this<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2020\/02\/41_base_template_with_dashboard-700x592.png\" alt=\"\" class=\"wp-image-5861\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">File <code>dashboard\/templates\/site\/base.html<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"19-21\" data-enlighter-linenumbers=\"false\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\n&lt;!DOCTYPE html>\n&lt;html>\n\t&lt;head>\n\t\t&lt;title>{\n\t\t&lt;link rel=\"icon\" type=\"image\/png\" href=\"{\n\t\t&lt;meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>\n\t\t&lt;meta http-equiv=\"Content-Language\" value=\"en-US\" \/>\n\t\t&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, shrink-to-fit=no\" \/>\n\n\t\t&lt;link href=\"{\n\t\t&lt;link href=\"{\n\t\t&lt;link href=\"{\n\t&lt;\/head>\n\n\t&lt;body>\n\t\t&lt;main role=\"main\">\n\t\t\t&lt;!--\n\t\t\tInsert content of dashboard.html here\n \t\t\t-->\n\n\t\t\t&lt;div id=\"site-wrapper\">\n\t\t\t\t{\n\t\t\t&lt;\/div>\n\t\t&lt;\/main>\n\t&lt;\/body>\n\n\t&lt;script src=\"{\n\t&lt;script src=\"{\n\t&lt;script src=\"{\n\t&lt;script src=\"{\n\n\t&lt;script src=\"{\n\t&lt;script src=\"{\n\n\t&lt;script src=\"{\n\t&lt;script src=\"{\n&lt;\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is Part 1 of Building a Dashboard with Django and Bootstrap: Introduction Building a complete web app isn&#8217;t always an easy task. Designing and Implementing on both sides (backend and front-end) requires mostly a lot of knowledge. So, why don&#8217;t using tools or framework, which helps and makes our life easier. Django is one of these frameworks: Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development So, let&#8217;s get started. Create project For subsequent steps, we will remember our [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,21],"tags":[108,114],"class_list":["post-5793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-django","tag-django","tag-python"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2020\/02\/00_header_2.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=5793"}],"version-history":[{"count":21,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5793\/revisions"}],"predecessor-version":[{"id":9701,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/5793\/revisions\/9701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/5872"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=5793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=5793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=5793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}