+ Alerts
+ Provide contextual feedback messages for typical user actions with the handful of available and flexible
+ alert messages.
+
+
+
+ Alerts
+ CSS
+ outputclass
+
+ note
+ section
+
+
+
+
+
+ Example
+ Alerts are available for any length of text, as well as an optional close button. For proper styling, use one
+ of the eight required contextual classes (e.g., set outputclass to
+ alert-success).
+
+
+ A simple primary alert—check it out!
+ A simple secondary alert—check it out!
+ A simple success alert—check it out!
+ A simple danger alert—check it out!
+ A simple warning alert—check it out!
+ A simple info alert—check it out!
+ A simple light alert—check it out!
+ A simple dark alert—check it out!
+
+ <section outputclass="alert-primary">
+ A simple primary alert—check it out!
+</section>
+<section outputclass="alert-secondary">
+ A simple secondary alert—check it out!
+</section>
+<section outputclass="alert-success">
+ A simple success alert—check it out!
+</section>
+<section outputclass="alert-danger">
+ A simple danger alert—check it out!
+</section>
+<section outputclass="alert-warning">
+ A simple warning alert—check it out!
+</section>
+<section outputclass="alert-info">
+ A simple info alert—check it out!
+</section>
+<section outputclass="alert-light">
+ A simple light alert—check it out!
+</section>
+<section outputclass="alert-dark">
+ A simple dark alert—check it out!
+</section>
+
+ Additional content
+ Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.
+
+
+
+ <i outputclass="bi bi-emoji-smile pe-2"/>Well done!
+ Aww yeah, you successfully read this important alert message. This example text with a
+ link is going to run a bit longer so that you can see how spacing within an alert works
+ with this kind of content.
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+
+ <section outputclass="alert-success">
+ <title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title>
+ <p>
+ Aww yeah, you successfully read this important alert message. This example text with a
+ <xref href="#">link</xref> is going to run a bit longer so that you can see
+ how spacing within an alert works with this kind of content.
+ </p>
+ <p>
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+ </p>
+</section>
+
+ Notes
+ DITA note elements are displayed as alerts according to the type
+ attribute.
+
+
+ This is just a note.
+ Notice this piece of information.
+ This note will speed you on your way.
+ Don't forget to do what this note says.
+ This is a fine little tip.
+ Please pay extra attention to this note.
+ Care is required when proceeding.
+ This note is important.
+ You can't do what this note says.
+ You may hurt yourself!
+ This is something other than a normal note.
+
+ <note type="note">This is just a note.</note>
+<note type="notice">Notice this piece of information.</note>
+<note type="fastpath">This note will speed you on your way.</note>
+<note type="remember">Don't forget to do what this note says.</note>
+<note type="tip">This is a fine little tip.</note>
+<note type="attention">Please pay extra attention to this note.</note>
+<note type="caution">Care is required when proceeding.</note>
+<note type="important">This note is important.</note>
+<note type="restriction">You can't do what this note says.</note>
+<note type="danger">You may hurt yourself!</note>
+<note type="other" othertype="Another note">This is something other than a normal note.</note>
+ The type can be overridden by using an outputclass.
+
+ This is a primary note.
+ This is a secondary note.
+ This is light note.
+ This is dark note.
+
+ <note outputclass="alert-primary">This is a primary note.</note>
+<note outputclass="alert-secondary">This is a secondary note.</note>
+<note outputclass="alert-light">This is light note.</note>
+<note outputclass="alert-dark">This is dark note.</note>
+
+
diff --git a/sample/badge.dita b/sample/badge.dita
new file mode 100644
index 00000000..84ed12b1
--- /dev/null
+++ b/sample/badge.dita
@@ -0,0 +1,67 @@
+
+
+
+
+ Cards
+ Bootstrap’s cards provide a flexible and extensible content container with multiple variants and
+ options.
+
+
+
+ Card
+ CSS
+ outputclass
+
+ section
+
+
+
+
+
+ About
+ A card is a flexible and extensible content container. It includes options for headers and footers, a
+ wide variety of content, contextual background colors, and powerful display options. If you’re familiar with
+ Bootstrap 3, cards replace Bootstrap 4.0’s panels, wells, and thumbnails. Similar functionality to those
+ components is available as modifier classes for cards.
+
+
+ Example
+ Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and
+ customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They
+ have no margin by default, so use
+ spacing
+ utilities as needed.
+ Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start,
+ so they’ll naturally fill the full width of its parent element. This is easily customized with Bootstrap’s
+ various
+ sizing
+ options.
+
+
+
+
+
+
+ Card Title
+
+ Some quick example text to build on the card title and make up the bulk of the card’s content.
+ Go Somewhere
+
+
+
+
+ <bodydiv outputclass="row">
+ <bodydiv outputclass="col">
+ <section outputclass="card w-50">
+ <title outputclass="h5">Card Title</title>
+ <image outputclass="card-img-top" href="..." />
+ <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
+ <xref outputclass="btn-primary" href="#">Go Somewhere</xref>
+ </section>
+ </bodydiv>
+</bodydiv>
+
+ Titles, text, and links
+ Links are added and placed next to each other by altering the outputclass and adding
+ card-link to an xref tag.
+ Subtitles are used by adding a sectiondiv element.
+
+
+
+
+
+ Card Title
+ Card Subtitle
+ Some quick example text to build on the card title and make up the bulk of the card’s content.
+ Card Link
+ Another Link
+
+
+
+
+ <bodydiv outputclass="row">
+ <bodydiv outputclass="col">
+ <section outputclass="card w-50">
+ <title outputclass="h5">Card Title</title>
+ <sectiondiv outputclass="h6">Card Subtitle</title>
+ <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
+ <xref outputclass="card-link" href="#">Card Link</xref>
+ <xref outputclass="card-link" href="#">Another Link</xref>
+ </section>
+ </bodydiv>
+</bodydiv>
+
+ Images
+ Setting outputclass to card-img-top places an image to the top of the card
+
+
+
+
+
+
+
+ Some quick example text to build on the card title and make up the bulk of the card’s content.
+
+
+
+
+ <bodydiv outputclass="row">
+ <bodydiv outputclass="col">
+ <section outputclass="card w-50">
+ <image outputclass="card-img-top" href="..." />
+ <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
+ </section>
+ </bodydiv>
+</bodydiv>
+
+ Header and footer
+ Add an optional header and/or footer within a card using the outputclass attribute and adding
+ card-header and card-footer
+
+
+
+
+
+
+ Special title treatment
+ Featured
+ With supporting text below as a natural lead-in to additional content.
+ Go somewhere
+
+
+
+
+ <bodydiv outputclass="row">
+ <bodydiv outputclass="col">
+ <section outputclass="card w-50">
+ <sectiondiv outputclass="card-header">Featured</sectiondiv>
+ <title outputclass="h5">Special title treatment</title>
+ <p>With supporting text below as a natural lead-in to additional content.</p>
+ <xref href="#" outputclass="btn-primary">Go somewhere</xref>
+ </section>
+ </bodydiv>
+</bodydiv>
+
+
diff --git a/sample/carousel.dita b/sample/carousel.dita
new file mode 100644
index 00000000..884f98ac
--- /dev/null
+++ b/sample/carousel.dita
@@ -0,0 +1,112 @@
+
+
+
+
+ Icons
+ DITA Bootstrap includes Bootstrap Icons by default. Other icon libraries such as can be added or removed
+ using command line parameters.
+
+
+ Bootstrap Icons
+
+ Bootstrap Icons is a growing
+ library of SVG icons that are designed by @mdo and maintained by the Bootstrap Team. They are open source and
+ licensed under MIT, just like Bootstrap so the icon set is freely available to everyone.
+
+
+
+
+ Installing icons
+ --icons.cdn.path
+ --icons.include
+ A Link to the default Bootstrap Icons CDN set is included by default. If you do not
+ need any icons you can exclude them by setting the --icons.include=
+
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --icons.include=
+ Other icon sets such as
+ Font Awesome
+ Feather and
+ Octicons are available. To use an alternative set of icons, modify the
+ sample
+ header or specify the path of the Icons CDN file using the --icons.cdn.path
+ parameter.
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --icons.cdn.path=path/to/icon-cdn-header.xml
+
+
+ Example
+ Icon fonts with classes for every icon are included in Bootstrap Icons. Include the icon web fonts in your page
+ via CSS, then reference the class names as needed in your DITA (e.g., i
+ outputclass="bi-alarm"/).
+ Use an additional otherprops and alter the CSS font-size and color to change the icon
+ appearance.
+
+
+
+
+
+
+
+ <i outputclass="bi-alarm"/>
+<i outputclass="bi-alarm" otherprops="style(font-size: 2rem; color: cornflowerblue;)"/>
+ Icons can also be placed within buttons as shown:
+
+
+
+
+
+
+
+
+ <xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-arrow-down-square-fill"/>
+</xref>
+<xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-chat-left-quote-fill"/>
+</xref>
+<xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-speedometer"/>
+</xref>
+<xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-camera-fill"/>
+</xref>
+<xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-link"/>
+</xref>
+<xref outputclass="btn-primary btn-floating m-1" href="#">
+ <i outputclass="bi-share-fill"/>
+</xref>
+
+
diff --git a/sample/images.dita b/sample/images.dita
new file mode 100644
index 00000000..bc350f64
--- /dev/null
+++ b/sample/images.dita
@@ -0,0 +1,47 @@
+
+
+
+
+ DITA Bootstrap
+
+ A plug-in for
+ DITA Open Toolkit that extends the default HTML5
+ output with a
+ Bootstrap 5.0 template and
+ components.
+ 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 the DITA outputclass attribute.
+
+
+
+
+ Bootstrap 5.0
+ DITA
+ installing
+
+
+
+
+
+ Installing
+ 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 https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
+dita --install https://github.com/infotexture/dita-bootstrap/archive/master.zip
+
+
+ Using
+ Specify the format when building output with the dita command:
+ dita --input=path/to/your.ditamap --format=html5-bootstrap
+
+
+
+ Customizing headers and footers
+ --args.hdr
+ --args.ftr
+ The plug-in includes a default static navigation menu with a project name and global link placeholders.
+ The default header file includes/bs-navbar-default.hdr.xml uses the Bootstrap primary
+ (blue) background color for the
+ navbar component.
+ You can edit a copy of this file to adjust the content of the global navigation. To override the global
+ navigation with your own header, pass a custom header file to the dita command via the
+ --args.hdr parameter:
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --args.hdr=path/to/your-header.xml
+ The plug-in includes a sample
+ header alternative with a light navbar.
+ No footer is added by default, but the plug-in also includes a sample
+ footer file. To add a footer to the generated output, pass a custom footer file to the dita command via the --args.ftr parameter:
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --args.ftr=path/to/your-footer.xml
+
+
+
+ Navigation menu
+ --nav-toc
+ The plug-in extends the standard HTML5 table of contents (ToC)
+ navigation parameter
+ --nav-toc to add styled list groups to the navigation menu. (The navigation is rendered as a
+ sidebar in desktop browsers and above the content on smaller devices.)
+ By default, the plug-in uses the partial option to include the current topic in the ToC
+ along with its parents, siblings and children. As with the default HTML5 plug-in, the full
+ option can also be used to generate a complete ToC for the entire map, or none to disable
+ the table of contents entirely.
+ As of version 5.3, the plug-in provides two new options to style the table of contents navigation with the
+ Bootstrap
+ list group component.
+
+
+ -
+ list-group-full – Styled full ToC within a Bootstrap list group
+
+ -
+ list-group-partial – Partial ToC with the current topic, parents, siblings, and children in a
+ list group
+
+
+ To use these options, pass the desired value to the dita command via the
+ --nav-toc parameter:
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --nav-toc=
+
+ -
+
+ <codeph>full</codeph> – Unstyled full TOC
+
+
+
+ -
+
+ <codeph>partial</codeph> – Unstyled partial TOC
+
+
+
+ -
+
+ <codeph>list-group-full</codeph> – Styled full ToC within a list group
+
+
+
+ -
+
+ <codeph>list-group-partial</codeph> – Styled partial ToC within a list group
+
+
+
+
+ For an example of list-group-full styling, see the output at
+ infotexture.github.io/dita-bootstrap.
+
+
+
+ Custom CSS
+ --args.css
+ --args.copycss
+ --args.csspath
+ --args.cssroot
+ Bootstrap themes can be generated via
+ Themestr.app. The plug-in includes a sample placeholder for
+ custom CSS styles. You can edit the css/custom.css file to replace the theme, or add style rules of your own.
+ To override the default Bootstrap theme, pass a custom CSS file like this to the dita command via the --args.css parameter:
+ dita --input=path/to/your.ditamap \
+ --format= \
+ --args.hdr=path/to/your-header.xml \
+ --args.css=<name-of-css>.css \
+ --args.copycss= \
+ --args.csspath=
+ --args.cssroot=path/to/your/theme
+ For more extensive customizations, you may want to fork this repository and create a new plug-in of your own.
+
+
+
+ Common Bootstrap utility classes
+ --bootstrap.css.shortdesc
+ --bootstrap.css.codeblock
+ --bootstrap.css.header
+ --bootstrap.css.card
+ --bootstrap.css.carousel
+ --bootstrap.css.carousel.caption
+ --bootstrap.css.tabs
+ --bootstrap.css.tabs.vertical
+ --bootstrap.css.accordion
+ The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
+ borders,
+ background,
+ text,
+ spacing, etc. using additional command line parameters:
+
+ -
+ --bootstrap.css.shortdesc – common Bootstrap utility classes for DITA
+ shortdesc elements
+ -
+ --bootstrap.css.codeblock – common Bootstrap utility classes for DITA
+ codeblock elements
+ -
+ --bootstrap.css.header – common Bootstrap utility classes for DITA
+ title elements
+ -
+ --bootstrap.css.card – common utility classes for Bootstrap
+ card components
+
+ -
+ --bootstrap.css.carousel – common utility classes for Bootstrap
+ carousel components
+
+ -
+ --bootstrap.css.carousel.caption – common utility classes for Bootstrap
+ carousel captions
+
+ -
+ --bootstrap.css.tabs – common utility classes for Bootstrap
+ tabbed dialog components
+
+ -
+ --bootstrap.css.tabs.vertical – common utility classes for Bootstrap
+ vertical tabbed dialog components
+
+ -
+ --bootstrap.css.accordion – common utility classes for Bootstrap
+ accordion components
+
+
+
+
+
diff --git a/sample/list-group.dita b/sample/list-group.dita
new file mode 100644
index 00000000..d5fbb24c
--- /dev/null
+++ b/sample/list-group.dita
@@ -0,0 +1,68 @@
+
+
+
+
+ Offcanvas
+ Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
+ Bootstrap’s JavaScript plugin.
+
+
+
+ Offcanvas
+ CSS
+ outputclass
+
+ section
+ xref
+ props
+
+
+
+
+
+ How it works
+ Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom
+ edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle,
+ and data attributes are used to invoke Bootstrap’s JavaScript.
+
+ - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
+ are separate plugins.
+ - Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s
+ variables.
+ - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
+ - Similar to modals, only one offcanvas can be shown at a time.
+
+ Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap offcanvas
+ element. Instead, use the class as an independent wrapping element.
+
+
+ Offcanvas components
+ Below is an offcanvas example that is displayed when the button is clicked. Add
+ props="offcanvas-toggle" to an xref element to associate a button to
+ an offcanvas
+
+
+ Click here to display offcanvas
+
+ Offcanvas
+ Content for the offcanvas goes here. You can place just about any section elements here.
+
+
+ <xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1">
+ Click here
+</xref>
+<section outputclass="offcanvas-start" id="offcanvas1">
+ <title>Offcanvas</title>
+ <p>
+ Content for the offcanvas goes here. You can place just about any section elements here.
+ </p>
+</section>
+
+ Placement
+ There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses
+ below
+
+ - Setting outputclass to offcanvas-start places offcanvas on the left of the
+ viewport (shown above)
+ - Setting outputclass to offcanvas-end places offcanvas on the right of the
+ viewport
+ - Setting outputclass to offcanvas-bottom places offcanvas on the bottom of
+ the viewport
+
+
+
+ Toggle right offcanvas
+
+ Offcanvas
+ Content for the offcanvas goes here. You can place just about any section elements here.
+
+
+ <section outputclass="offcanvas-end">
+ ...etc
+<section>
+
+ Toggle bottom offcanvas
+
+ Offcanvas
+ Content for the offcanvas goes here. You can place just about any section elements here.
+
+
+ <section outputclass="offcanvas-bottom">
+ ...etc
+<section>
+
+
diff --git a/sample/src/full.png b/sample/src/full.png
new file mode 100644
index 00000000..952c958f
Binary files /dev/null and b/sample/src/full.png differ
diff --git a/sample/src/list-group-full.png b/sample/src/list-group-full.png
new file mode 100644
index 00000000..58bbba03
Binary files /dev/null and b/sample/src/list-group-full.png differ
diff --git a/sample/src/list-group-partial.png b/sample/src/list-group-partial.png
new file mode 100644
index 00000000..b170ad90
Binary files /dev/null and b/sample/src/list-group-partial.png differ
diff --git a/sample/src/partial.png b/sample/src/partial.png
new file mode 100644
index 00000000..d45d7f55
Binary files /dev/null and b/sample/src/partial.png differ
diff --git a/sample/tables.dita b/sample/tables.dita
new file mode 100644
index 00000000..c324c342
--- /dev/null
+++ b/sample/tables.dita
@@ -0,0 +1,209 @@
+
+
+
+