v1.0

Bootstrap 5 responsive admin template

documented by Sean Ngu

Updated on: 10/Feb/2024
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

Follow the following step to install the django in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

<!-- run the following command --> 
cd /your-path-url/template_django
python manage.py runserver

<!-- browse the url --> 
http://127.0.0.1:8000/

Make sure python >= 3.10 & node.js has been installed on your localhost / server

File structure overview for Django Version

hud_django_v1.0/
├──template_django_startup/            // Version without demo pages
└──template_django/                    // Version including all demo pages
    ├── db.sqlite3                     // SQLite database file
    ├── manage.py                      // Django management script
    ├── DjangoHUD/                     // Django project directory
    │   ├── asgi.py                    // ASGI configuration
    │   ├── settings.py                // Django settings
    │   ├── urls.py                    // URL routing
    │   ├── wsgi.py                    // WSGI configuration
    │   ├── __init__.py                // Package initialization
    │   ├── __pycache__/               // Cached Python files
    │   └── templates/                 // HTML templates
    └── DjangoHUDApp/                  // Django app directory
        ├── admin.py                   // Admin configuration
        ├── apps.py                    // App configuration
        ├── models.py                  // Database models
        ├── tests.py                   // Unit tests
        ├── urls.py                    // App-specific URL routing
        ├── views.py                   // View functions
        ├── __init__.py                // Package initialization
        ├── __pycache__/               // Cached Python files
        ├── gulp/                      // Gulp build system
        │   ├── gulpfile.js            // Gulp configuration
        │   ├── package.json           // Node.js package file
        │   └── src/                   // Source files for Gulp tasks
        ├── migrations/                // Database migration files
        ├── static/                    // Static files (CSS, JS, images)
        │   ├── css
        │   ├── data
        │   ├── img
        │   ├── js
        │   ├── plugins
        │   └── webfonts
        ├── utils/                     // Utility functions
        │   ├── __pycache__/           // Cached Python files
        │   └── context_processors.py  // Context processors for sidebar array
        └── templates/                 // App-specific HTML templates
            ├── base.html              // Base template
            ├── pages/                 // Demo pages
            └── partial/               // Reusable partial templates
                ├── footer.html
                ├── header.html
                ├── scroll-top-btn.html
                ├── sidebar.html
                ├── theme-panel.html
                └── top-nav.html

We split the header, sidebar, footer and etc into few other part and include it in the base file. Base file has been located in /template_django/DjangoHUDApp/templates/base.html.

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark" {% block htmlAttr %}{% endblock %}>
<head>
  <meta charset="utf-8">
  <title>HUD | {% block title %}{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  
  <!-- ================== BEGIN core-css ================== -->
  {% load static %}
  <link href="{% static 'css/vendor.min.css' %}" rel="stylesheet">
  <link href="{% static 'css/app.min.css' %}" rel="stylesheet">
  <!-- ================== END core-css ================== -->
  
  {% block css %}{% endblock %}
</head>
<body class="{{ bodyClass }}{% if appHeaderHide is not None %} pace-top {% endif %}" {{ bodyAttr }}>
  
  <div id="app" class="app 
    {% if appSidebarHide is not None %}app-without-sidebar{% endif %}
    {% if appSidebarCollapsed %}app-sidebar-collapsed{% endif %}
    {% if appHeaderHide is not None %}app-without-header{% endif %}
    {% if appTopNav %}app-with-top-nav{% endif %}
    {% if appContentFullHeight is not None %}app-content-full-height{% endif %}
    {% if appFooter %}app-fixed-footer{% endif %}
    {% if appBoxedLayout %}app-boxed-layout{% endif %}
  ">
    {% if appHeaderHide is None %}
      {% include 'partial/header.html' %}
    {% endif %}
    
    {% if appSidebarHide is None %}
      {% include 'partial/sidebar.html' %}
    {% endif %}
    
    {% if appTopNav %}
      {% include 'partial/top-nav.html' %}
    {% endif %}
    
    <div class="app-content {{ appContentClass }}">
      {% block content %}{% endblock %}
    </div>
    
    {% include 'partial/theme-panel.html' %} 
    
    {% if appFooter %}
      {% include 'partial/footer.html' %}
    {% endif %}
  </div>

  {% include 'partial/scroll-top-btn.html' %} 
  
  {% block outter_content %}{% endblock %}

  <!-- ================== BEGIN core-js ================== -->
  <script src="{% static 'js/vendor.min.js' %}"></script>
  <script src="{% static 'js/app.min.js' %}"></script>
  <!-- ================== END core-js ================== -->
  
  {% block js %}{% endblock %}
</body>
</html>

Below is a list of supported settings that can be used as context variables in views.py.

Variable Usage
"bodyClass": "pace-top" Set the css class for <body> tag
"appSidebarHide": 1 Set to exclude the sidebar from the page
"appSidebarCollapsed": 1 Set to collapse the sidebar when page load
"appHeaderHide": 1 Set to exclude the header from the page
"appTopNav": 1 Set to include the top-nav to the page
"appFooter": 1 Set to include the fixed footer to the page
"appBoxedLayout": 1 Set to make the page become boxed layout
"appContentFullHeight": 1 Set to make the page content full height
"appContentClass": "p-0" Set the css class for .app-content

Using blocks to add title / css / js / outter content by page level.

// example for how to add page title
{% block title %}Dashboard{% endblock %}

// example for how to add page level css
{% block css %}
  <link href="{% static 'plugins/photoswipe/dist/photoswipe.css' %}" rel="stylesheet">
  ...
{% endblock %}

// example for how to add page level js
{% block js %}
  <script src="{% static 'plugins/photoswipe/dist/photoswipe-ui-default.min.js' %}"></script>
  ...
{% endblock %}

// example of how to add content to the outer app-content div
{% block outter_content %}
  your content here
  ...
{% endblock %}

The sidebar menu is generated in /utils/context_processors.py and rendered globally through /templates/partial/sidebar.html. Below is an example of the sidebar menu array that can be defined in context_processors.py. The sidebar menu will automatically be set to active based on the URL name specified in urls.py.

  sidebar_menu = [{
    'text': 'Navigation',
    'is_header': 1
  },{
    'url': '/',
    'icon': 'bi bi-cpu',
    'text': 'Dashboard',
    'name': 'index'
  }, {
    'icon': 'bi bi-envelope',
    'text': 'Email',
    'children': [{
      'url': '/email/inbox',
      'action': 'Inbox',
      'text': 'Inbox',
      'name': 'emailInbox'
    }]
  }]

All the css files used in Studio Larvel has been compiled into two files app.min.css and vendor.min.css by gulp command. You may change the color scheme from /gulp/src/scss/_variables.scss.

vendor.min.css
  1. FontAwesome
  2. Bootstrap Icons
  3. jQuery UI
  4. Animate.css
  5. Pace Loader
  6. Perfect Scrollbar
app.min.css
  1. Bootstrap
  2. HUD Core CSS

This theme compiles 6 javascript library into two files app.min.js and vendor.min.js by gulp command.

vendor.min.js
  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Perfect Scrollbar
  6. JavaScript Cookie
app.min.js
  1. HUD Core Javascript

Sidebar collapsed:

def index(request):
  context = {
    "appSidebarCollapsed": 1
  }
  return render(request, "pages/index.html", context)

Full height:

def index(request):
  context = {
    "appContentFullHeight": 1,
    "appContentClass": "p-0"
  }
  return render(request, "pages/index.html", context)

Full width:

def index(request):
  context = {
    "appContentFullWidth": 1,
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Fixed footer:

def index(request):
  context = {
    "appFooter": 1
  }
  return render(request, "pages/index.html", context)

Boxed Layout

def index(request):
  context = {
    "appBoxedLayout": 1,
    "bodyClass": "pace-top"
  }
  return render(request, "pages/index.html", context)

Top Nav

def index(request):
  context = {
    "appTopNav": 1,
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Without Sidebar

def index(request):
  context = {
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Without Header

def index(request):
  context = {
    "appHeaderHide": 1
  }
  return render(request, "pages/index.html", context)

Add the theme class to the <body> tag in order to change the theme color.

Available Theme Options

<body class="theme-red">...</body>
<body class="theme-pink">...</body>
<body class="theme-orange">...</body>
<body class="theme-yellow">...</body>
<body class="theme-lime">...</body>
<body class="theme-green">...</body>
<body class="theme-teal">...</body>
<body class="theme-cyan">...</body>
<body class="theme-blue">...</body>
<body class="theme-purple">...</body>
<body class="theme-indigo">...</body>
<body class="theme-black">...</body>
<body class="theme-gray-100">...</body>
<body class="theme-gray-200">...</body>
<body class="theme-gray-300">...</body>
<body class="theme-gray-400">...</body>
<body class="theme-gray-500">...</body>
<body class="theme-gray-600">...</body>
<body class="theme-gray-700">...</body>
<body class="theme-gray-800">...</body>
<body class="theme-gray-900">...</body>

Add the 'cover' class to the <html> tag to change the page cover. You can modify the cover image from either /gulp/src/scss/images/ or /static/css/images. Note that both light and dark mode have separate background cover images.

Available Cover Options

<html class="bg-cover-2">
<html class="bg-cover-3">
<html class="bg-cover-4">
<html class="bg-cover-5">
<html class="bg-cover-6">
<html class="bg-cover-7">
<html class="bg-cover-8">
<html class="bg-cover-9">

We have implemented a default dark mode theme that is applied to the HTML page. This is achieved through the use of the data-bs-theme="dark" attribute in the <html> tag.

If you wish to enable the light mode instead, you can easily do so by removing the data-bs-theme="dark" attribute from the HTML tag. This will disable the default dark mode and enable the light mode theme.

Please note that once you remove the data-bs-theme="dark" attribute, the light mode theme will persist even if the user refreshes the page or navigates to a different page within the application.

Here's an example:

change from
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
</html>
to
<!DOCTYPE html>
<html lang="en">
</html>

With this example, the data-bs-theme="dark" attribute has been removed from html tag. This will enable the light mode to the entire page.

OR

If you want to apply light / dark mode to a single component only, you can add the data-bs-theme="light|dark" attribute to that component.

<div class="card" data-bs-theme="light">
  <div class="card-body">
    <!-- your component content here -->
  </div>
</div>

To enable RTL mode, follow these steps:

  1. Navigate to the /DjangoHUDApp/gulp/src/scss/_variables.scss file in your code editor.
  2. Find the $enable-rtl variable and change its value to true:
    $enable-rtl: true;
    
    This will enable RTL mode for your application.
  3. Save the changes to the file.
  4. Open your terminal or command prompt and navigate to the root directory of your project.
  5. Run the following command to regenerate the app.min.css file:
    npm run dev
    
    This will regenerate the app.min.css file with the changes you made to the $enable-rtl variable.

Global Variables

The /DjangoHUDApp/gulp/src/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /DjangoHUDApp/gulp/src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs.

<!-- global variable -->
/DjangoHUDApp/gulp/src/scss/_variables.scss

Dark Mode Variables

The /DjangoHUDApp/gulp/src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /DjangoHUDApp/gulp/src/scss/_variables.scss file to provide different values for light and dark modes.

<!-- dark mode variable -->
/DjangoHUDApp/gulp/src/scss/_variables-dark.scss

I've used the following images, icons or other files as listed.

Framework

  1. Django: https://www.djangoproject.com/
  2. Python: https://www.python.org/
  3. NodeJs: https://nodejs.org/en
  4. Npm: https://www.npmjs.com/

jQuery Plugins

  1. animate.css: https://daneden.github.io/animate.css/
  2. ApexCharts: https://apexcharts.com/
  3. jQuery File Upload: https://blueimp.github.io/jQuery-File-Upload/
  4. Bootstrap: http://getbootstrap.com/
  5. Bootstrap Icons: https://icons.getbootstrap.com/
  6. Bootstrap Datepicker: https://uxsolutions.github.io/bootstrap-datepicker/
  7. Bootstrap Daterangepicker: http://www.daterangepicker.com/
  8. Bootstrap Slider: https://www.eyecon.ro/bootstrap-slider/
  9. Bootstrap Timepicker: http://jdewit.github.io/bootstrap-timepicker/
  10. Bootstrap Table: https://bootstrap-table.com/
  11. Chart.js: https://chartjs.org
  12. DataTables: https://datatables.net/
  13. FontAwesome: https://fontawesome.com/
  14. Fullcalendar: https://fullcalendar.io/
  15. Iconify: https://icon-sets.iconify.design/
  16. jQuery: https://jquery.com/
  17. jQuery UI: https://jqueryui.com/
  18. jQuery Typeahead: http://www.runningcoder.org/jquerytypeahead/
  19. jquery.maskedinput: https://github.com/excellalabs/jquery.maskedinput
  20. Javascript Cookie: https://github.com/js-cookie/js-cookie
  21. jszip: https://github.com/Stuk/jszip
  22. jVectormap: http://jvectormap.com/
  23. Lity: https://sorgalla.com/lity/
  24. Tag-It: http://aehlke.github.io/tag-it/
  25. Selectpicker: https://picker.uhlir.dev/
  26. Spectrum: https://seballot.github.io/spectrum/
  27. kbw-countdown: https://github.com/kbwood/countdown
  28. moment: http://momentjs.com/
  29. Pace: https://github.com/HubSpot/pace
  30. pdfmake: https://github.com/bpampuch/pdfmake
  31. Perfect Scrollbar: https://github.com/mdbootstrap/perfect-scrollbar
  32. PhotoSwipe: https://photoswipe.com/
  33. PicMo: https://picmojs.com/
  34. Popper.js: https://popper.js.org/
  35. Summernote: https://github.com/summernote/summernote

Photos

  1. Unsplash: https://unsplash.com/
  2. Freepik: https://www.freepik.com/