DokuWiki Bootstrap Template — Responsive Design, Layouts, and Customization

In this tutorial, you'll learn how to install, configure, and customize the Bootstrap3 template for DokuWiki to create responsive, mobile-friendly wiki designs with modern navigation and layout options.

What You'll Learn

• Installing the Bootstrap3 template
• Understanding Bootstrap's grid system in DokuWiki
• Configuring layout options (sidebar, navbar, footer)
• Customizing colors and typography
• Adding responsive navigation menus
• Using Bootstrap components in wiki pages

Why It Matters

The default DokuWiki template works but looks dated. The Bootstrap3 template transforms your wiki into a modern, responsive site that works on desktop, tablet, and mobile. It adds features like dropdown menus, search bars, customizable headers, and theme switching. For any public-facing wiki or internal portal, the Bootstrap3 template improves usability and appearance dramatically.

Real-World Use

A company replaces their default DokuWiki template with Bootstrap3. They configure a top navigation bar with dropdown menus, a collapsible sidebar, and a footer with company info. The wiki is now accessible on mobile devices — employees can browse documentation from their phones. The admin enables the "theme switcher" so users can choose between light and dark mode.

Learning Path

flowchart LR
  A[Template Variables] --> B[Bootstrap Template]
  B --> C[Custom Template]
  C --> D[Template Configuration]
  D --> E[Caching]
  E --> F[SEO]

Installing the Bootstrap3 Template

Method 1: Git Clone

cd /var/www/html/wiki/lib/tpl/
git clone https://github.com/giterlizzi/dokuwiki-template-bootstrap3 bootstrap3

Method 2: Manual Download

cd /var/www/html/wiki/lib/tpl/
wget https://github.com/giterlizzi/dokuwiki-template-bootstrap3/archive/master.zip
unzip master.zip
mv dokuwiki-template-bootstrap3-master bootstrap3

Enabling the Template

<?php
// conf/local.php
$conf['template'] = 'bootstrap3';

Template Configuration

The Bootstrap3 template has its own configuration interface. Access it at Admin > Configuration Manager > Bootstrap3 Template.

Key Configuration Sections

+------------------------------------------+
| Bootstrap3 Template Configuration        |
+------------------------------------------+
| □ General Settings                       |
|   - Theme: [Default / Cerulean / ...]     |
|   - Fluid container: [Yes / No]          |
|   - Sidebar position: [Left / Right]     |
|   - Page tools position: [Navbar / Side] |
+------------------------------------------+
| □ Navigation                             |
|   - Show search: [Yes / No]              |
|   - Show page tools: [Yes / No]          |
|   - Navbar style: [Default / Inverse]    |
+------------------------------------------+
| □ Sidebar                                |
|   - Collapsible: [Yes / No]              |
|   - Hidden on mobile: [Yes / No]         |
+------------------------------------------+
| □ Footer                                 |
|   - Show footer: [Yes / No]              |
|   - Footer text: [Custom HTML]           |
+------------------------------------------+

Common Configuration Settings

<?php
// conf/local.php (Bootstrap3 settings)

// Theme selection (bootswatch themes)
$conf['plugin']['bootstrap3']['theme'] = 'paper';

// Layout
$conf['plugin']['bootstrap3']['fluidContainer'] = 1;
$conf['plugin']['bootstrap3']['sidebarPosition'] = 'left';
$conf['plugin']['bootstrap3']['sidebarOnPages'] = 'always';

// Navigation
$conf['plugin']['bootstrap3']['navbarInverse'] = 0;
$conf['plugin']['bootstrap3']['showSearch'] = 1;
$conf['plugin']['bootstrap3']['showPageTools'] = 1;

// Footer
$conf['plugin']['bootstrap3']['showFooter'] = 1;
$conf['plugin']['bootstrap3']['footerText'] = '&copy; Company Name';

Responsive Layout

Bootstrap3 uses a 12-column grid system. The DokuWiki Bootstrap3 template maps wiki elements to this grid.

Default Layout Structure

+------------------------------------------+
| Navbar (full width)                      |
+----------+-------------------------------+
| Sidebar  | Main Content Area             |
| (3 cols) | (9 cols)                      |
+----------+-------------------------------+
| Footer (full width)                      |
+------------------------------------------+

Sidebar Configuration

Control when the sidebar appears:

• Always: Sidebar is always visible
• On specific pages: Sidebar only on pages with sidebar content
• Never: Sidebar is hidden

Fluid vs Fixed Layout

• Fixed: Content has a maximum width (centered on large screens)
• Fluid: Content spans the full screen width

<?php
// Fluid container (full width)
$conf['plugin']['bootstrap3']['fluidContainer'] = 1;

// Fixed container (max-width)
$conf['plugin']['bootstrap3']['fluidContainer'] = 0;

Navigation Bar

The navbar replaces the default header and provides top-level navigation.

Navbar Items

Configure navbar menu items through the template configuration or add them manually:

<?php
// Add custom navbar items (in main.php or template configuration)
$navbarItems = array(
    array('label' => 'Home', 'link' => wl('start')),
    array('label' => 'Projects', 'link' => wl('projects:start')),
    array('label' => 'Guides', 'link' => wl('guides:start')),
    array('label' => 'About', 'link' => wl('about')),
);

Dropdown Menus

The navbar supports dropdown menus for nested navigation:

Home | Projects | Guides | About
              |
              +-- Project Alpha
              +-- Project Beta
              +-- Archive

Navbar Search

The search box can appear in the navbar. Enable it in configuration:

<?php
$conf['plugin']['bootstrap3']['showSearch'] = 1;

Theme Customization

Built-in Themes (Bootswatch)

The template includes Bootswatch themes:

<?php
$conf['plugin']['bootstrap3']['theme'] = 'darkly';

Custom CSS

Override theme styles using conf/userstyle.css:

/* conf/userstyle.css for Bootstrap3 */
.navbar-default {
    background-color: #2c3e50;
    border-color: #1a252f;
}

.navbar-default .navbar-nav > li > a {
    color: #ecf0f1;
}

#dw__sidebar {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

Less Variables

For deeper customization, create a less/variables.less file in the template directory:

// lib/tpl/bootstrap3/less/variables.less
@brand-primary: #3498db;
@brand-success: #2ecc71;
@brand-info: #9b59b6;
@brand-warning: #f39c12;
@brand-danger: #e74c3c;

Responsive Behavior

Mobile Breakpoints

Bootstrap3's responsive breakpoints:

On mobile devices:

• Sidebar collapses or moves below content
• Navbar becomes a hamburger menu
• Tables become horizontally scrollable

Testing Responsive Design

Use browser developer tools to test mobile layouts:

1. Open Chrome DevToolsk "DevTools" >}} (F12)
2. Click the mobile device icon
3. Select a device or resize the viewport
4. Test navigation, sidebar, and content readability

Common Mistakes

1. Not configuring the sidebar position: The default sidebar position is on the right. This is unusual for most users. Change to left for consistency with most wikis.
2. Using too many navbar items: The navbar is not a sitemap. Keep main items to 5-7. Use dropdown menus for sub-items.
3. Forgetting to test mobile layout: Desktop changes can break mobile layout. Always test on a small viewport after making changes.
4. Not using a Bootswatch theme: The default Bootstrap appearance is recognizable and generic. Choose a theme that fits your brand.
5. Ignoring the fluid container setting: Fixed-width containers may leave large margins on widescreen monitors. Use fluid for modern, full-width designs.

Practice Questions

1. How do you install and enable the Bootstrap3 template for DokuWiki?
2. What is the difference between fluid and fixed container layouts, and when would you use each?
3. How do you change the Bootstrap3 template theme and override specific CSS properties?
4. Challenge: Create a complete Bootstrap3 template configuration for a company wiki. The requirements are: dark theme (Darkly), left sidebar, fluid container, top navbar with dropdown menus for departments, search in navbar, footer with copyright text, sidebar visible on all pages, tables should be striped and hoverable, and mobile layout should collapse the sidebar. Implement the configuration and test on mobile, tablet, and desktop viewports.

FAQ

{{< faq "Can I use Bootstrap components in page content?" "Yes. You can use Bootstrap HTML classes in wiki pages if HTML is enabled. For example, <div class=\"alert alert-info\">Your message here</div>. Use this carefully — HTML in pages can affect layout." >}}

Mini Project

Goal: Set up a responsive wiki with the Bootstrap3 template.

1. Install the Bootstrap3 template
2. Configure the template with:
   • Darkly theme
   • Left sidebar
   • Fluid container
   • Top navbar with 5 menu items
   • Search in navbar
   • Footer with copyright
3. Customize the navbar colors via userstyle.css
4. Test the wiki on mobile, tablet, and desktop viewports
5. Add the ~~NOSIDEBAR~~ tag to one page and verify full-width display
6. Document your configuration choices

What's Next

The Bootstrap template provides a solid foundation. Now learn to create a custom template from scratch for complete design control.