DITA Bootstrap PDF

A plug-in for DITA Open Toolkit that adds PDF print output to the DITA Bootstrap plug-in.

• Installing
• Using
• Featured Bootstrap components
• Customizing
• License

Installing

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

dita install dita-bootstrap.html
dita install https://github.com/dita-bootstrap/dita-bootstrap.pdf/archive/master.zip

Using

Specify the pdf format when building output with the dita command. If the plug-in is installed, the Bootstrap-based XSL-FO overrides will be applied automatically.

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

Featured Bootstrap components

The plug-in includes XSL-FO handling for the following DITA Bootstrap components. You can use these through the DITA Bootstrap Specialization elements to achieve a consistent look in print:

• Accordions (<accordion>)
• Alerts (<alert>)
• Badges (<badge>)
• Buttons (<button>)
• Cards (<card>)
• Carousels (<carousel> as a contact sheet)
• Figures (<fig>)
• Grid layout (<grid-row>, <grid-col>)
• Icons (<icon>)
• List groups (<list-group>)
• Notes (<note> - as <alert>)
• Tables (<table>)
• Thumbnails (<thumbnail>)

Using Bootstrap Specializations

The preferred way to use this plug-in is via the DITA Bootstrap domain specializations. These provide native DITA elements with specialized attributes for Bootstrap styling:

<card color="primary" border="1" rounded="yes">
  <title>Card Title</title>
  <p>Card content goes here.</p>
</card>

The print plug-in interprets these specialized elements and attributes to generate equivalent XSL-FO styling in the PDF output.

Colors and Borders

Most DITA Bootstrap Specializations, as well as many base DITA elements, support the color and border attributes to control their appearance:

• Color Themes: Use standard Bootstrap themes such as primary, secondary, success, danger, warning, info, light, and dark.

  <section color="primary">
    <title>Primary Section</title>
    <p>This section has a primary background color.</p>
  </section>
  
  <alert color="warning">
    <p>This is a warning alert.</p>
  </alert>
  <badge color="success">New</badge>

• Border Thickness: Use numeric values from 1 to 5 to control border width.

  <ph border="1">Bordered phrase</ph>
  
  <card border="3" color="info">
    <title>Thick Border Card</title>
    <p>Content...</p>
  </card>

Thumbnails

The <thumbnail> element (a specialization of <image>) can be used to add a themed frame around images:

<thumbnail href="image.png" color="primary" placement="break"/>

• @color: Sets the border and background theme (e.g., primary uses a solid primary border and a subtle primary background).
• @placement: Use break for a centered block-level image or inline for flowing text integration.

Customizing

Common Bootstrap utility classes

Many of the common Bootstrap utility classes for borders, background, text, and spacing can be used via the outputclass attribute in DITA topics. The print plug-in interprets these classes and applies corresponding XSL-FO styling.

For more information on the available classes, see the main DITA Bootstrap documentation.

License

Apache 2.0 © 2026 Jason Fox