Skip to content
Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time

DITA Bootstrap

A plug-in for DITA Open Toolkit that extends the default HTML5 output with a basic Bootstrap template.

Sample DITA Bootstrap output


Use the dita command to add this plug-in to your DITA Open Toolkit installation:

DITA-OT 3.5 and newer:

dita install fox.jason.extend.css
dita install net.infotexture.dita-bootstrap

DITA-OT 3.3 and newer:

dita --install fox.jason.extend.css
dita --install net.infotexture.dita-bootstrap

DITA-OT 3.2 and older:

dita --install \
dita --install \


Specify the html5-bootstrap format when building output with the dita command:

dita --input=path/to/your.ditamap \


Header menu

The plug-in includes a default static navbar with a project name and global links. To override the global navigation with a header of your own, pass a custom header file to the dita command via the --args.hdr parameter:

dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \

The plug-in includes a sample header alternative with a dark navbar.

Edit a copy of this file to adjust the content of the global navigation.

Sidebar menu

The plug-in extends the standard --nav-toc parameter to add styled list groups for the sidebar. Five styles now are supported:

  • full - Unstyled full TOC - same as HTML5 Plugin (default)
  • partial - Unstyled partial TOC that shows the current topic - same as HTML5 Plugin
  • list-group-full - Styled full TOC within a Bootstrap List Group
  • list-group-partial - Styled partial TOC that shows the current topic within a Bootstrap List Group
  • none - no TOC
dita --input=path/to/your.ditamap \
     --format=html5-bootstrap \

Custom CSS

Bootstrap themes can be generated using the The plug-in includes a sample placeholder for custom CSS styles. You can edit this file to add style rules of your own. Override the default Bootstrap theme by passing a custom CSS file to the dita command via the --args.css parameter:

dita --input=path/to/your.ditamap --format=html5-bootstrap \
     --args.hdr=path/to/your-header.xml \
     --args.css=<name-of-css>.css \
     --args.copycss=yes \
     --args.csspath=css \

Sample DITA Bootstrap output

For more extensive customizations, you may want to fork this repository and create a new plug-in of your own.

You can add your own XSLT customizations by creating a new plug-in that extends the DITA Bootstrap XSLT transforms. Just amend args.xsl to point to your own XSLT files. An XSLT template is included within this repository.


  • If you find this useful and build something of your own on top of it, let me know.

  • If you find a bug or would like to suggest a change, create an issue.
    (If it's a bug, provide steps to recreate the issue.)

  • If you know how to fix it yourself, submit a pull request with the proposed changes.


Apache 2.0 © 2017 - 2021 Roger W. Fienhold Sheen

Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official Bootstrap 5.0 documentation, however DITA markup is used throughout the examples describing how to implement these components correctly using outputclass.