Bootstrap 5.3 Templates Bundle Documentation

Overview

The DjangoZen Bootstrap 5.3 Templates Bundle is a premium collection of 7 production-ready HTML templates built on Bootstrap 5.3.3. Each template is fully responsive, includes dark mode, and supports 4 languages (EN, NL, DE, FR).

What's Included

Template	Pages	Theme
Legal Landing	5 pages	Navy #1e3a5f + Gold #c9a227
Business Landing	5 pages	Blue #2563eb
Medical Landing	5 pages	Teal #0d9488
Admin Dashboard	9 pages	Adaptive
E-commerce Storefront	9 pages	Blue #3b82f6 + Amber
Business Website	5 pages	Professional Blue
Component Library	1 page	All 50+ components

Total: 39 HTML pages

Requirements

Modern web browser (Chrome, Firefox, Safari, Edge — last 2 versions)
Text editor (VS Code, Sublime Text, etc.)
Local server (optional, for testing)

File Structure

bootstrap-templates-bundle/
├── landing-legal/           # Legal SaaS landing page (5 pages)
├── landing-business/        # Business SaaS landing page (5 pages)
├── landing-medical/         # Medical SaaS landing page (5 pages)
├── admin-dashboard/         # Admin dashboard (9 pages)
├── ecommerce-storefront/    # E-commerce store (9 pages)
├── business-website/        # Business website (5 pages)
├── component-library/       # 50+ reusable components (1 page)
├── shared/
│   ├── css/base.css        # Core styles and CSS variables
│   └── js/main.js          # Core JavaScript utilities
├── locale/                  # Django translation files
│   ├── en/LC_MESSAGES/
│   ├── nl/LC_MESSAGES/
│   ├── de/LC_MESSAGES/
│   └── fr/LC_MESSAGES/
├── README.md
├── LICENSE.txt
└── CHANGELOG.md

Quick Start

Extract the ZIP file to your project directory
Open any template folder and launch index.html in your browser
Customize colors and content as needed

Customization

CSS Variables

All colors and typography are controlled via CSS custom properties in shared/css/base.css:

:root {
  --dz-primary: #2563eb;
  --dz-accent: #f59e0b;
  --dz-font-display: 'Outfit', sans-serif;
  --dz-font-body: 'DM Sans', sans-serif;
}

Override in your template's own CSS file:

:root {
  --dz-primary: #your-color;
  --dz-accent: #your-accent;
}

Changing the Logo

Replace the logo text or image in the <nav> section of each template:

<a class="navbar-brand fw-bold" href="index.html">
  Your Company Name
</a>

Dark Mode

Dark mode uses Bootstrap 5.3's built-in color mode system:

<!-- Enable dark mode -->
<html data-bs-theme="dark">

<!-- Enable light mode (default) -->
<html data-bs-theme="light">

Toggle dark mode dynamically with Alpine.js:

<div x-data="themeToggle()">
  <button @click="toggle()" class="btn btn-icon">
    <i x-show="!isDark" class="fas fa-moon"></i>
    <i x-show="isDark" class="fas fa-sun"></i>
  </button>
</div>

Multi-Language Support

Built-in support for English, Dutch, German, French.

Use the data-i18n attribute on text elements:

<span data-i18n="nav_home">Home</span>
<span data-i18n="hero_title">Welcome</span>

The language selector reads from /locale/{lang}/translations.json.

Django Integration

1. Copy Templates

cp -r landing-legal/ your_project/templates/

2. Add Translation Files

cp -r locale/ your_project/

3. Update settings.py

LANGUAGES = [
    ('en', 'English'),
    ('nl', 'Nederlands'),
    ('de', 'Deutsch'),
    ('fr', 'Francais'),
]
LOCALE_PATHS = [BASE_DIR / 'locale']

4. Use Django Template Tags

{% load i18n %}
<h1>{% trans "hero_title" %}</h1>

CDN Dependencies

All dependencies load via CDN — no build step required:

Library	Version	Purpose
Bootstrap	5.3.3	CSS framework
Font Awesome	6.5.1	Icons
Alpine.js	3.x	Interactivity
Chart.js	4.4.1	Dashboard charts
Google Fonts	—	Typography

Components

The Component Library (component-library/index.html) documents all 50+ available components:

Category	Examples
Buttons	Solid, outline, gradient, icon, loading
Cards	Product, profile, pricing, testimonial, stats
Forms	Login, register, contact, newsletter, multi-step
Navigation	5 navbar styles, breadcrumbs, tabs, pagination
Hero Sections	10 variations (gradient, split, image, video)
Modals	Alert, confirm, form, gallery
Tables	Basic, striped, responsive, sortable
Alerts & Toasts	All Bootstrap variants + custom styles

Support

Need help? Contact us via our support page.

License	Support Level
Standard	Community support
Professional	Priority support — 24h response
White-Label	VIP support — same-day response

Info

Product: Bootstrap 5.3 Templates Bundle

Type: Template

Version: 1.0.0

Updated: Mar 06, 2026

All Documentation