Easy styling

Out of the box, Live DITA transforms your DITA content to Bootstrap 5. Each page is expected to be a dita composite topic, with nested concept topics mapped to the sections on the page. To control the output of the DITA-to-Bootstrap XSL transform for each page section, you use outputclass on the concepts.

Page sections alternate between white and light grey background colors. You can override backgroud colors via the props on the concept or via changes to the custom.css file.

Columns

concept with outputclass = columns.

Each section is mapped to a new column. Responsive display: 1 column at xs size, 2 at sm, 3 above. Concept title can be empty. Non-empty title plus content preceding first section shows in a single column across the entire page, with text centered.

Section 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Leftright (1)

concept with outputclass = leftright.

All content except a fig with outputclass = sideshow is shown to one side, using two-thirds of the full column width. The remaining one-third is used for the sideshow figure. Multiple leftright concepts use alternate sides for the figures and text.

A p with outputclass = copyright translates to a copyright message below the image in small font size.

Leftright (2)

concept with outputclass = leftright.

All content except a fig with outputclass = sideshow is shown to one side, using two-thirds of the full column width. The remaining one-third is used for the sideshow figure. Multiple leftright concepts use alternate sides for the figures and text.

A p with outputclass = copyright translates to a copyright message below the image in small font size.

Accordion

concept with outputclass = accordion.

Each section is mapped to a collapsible section, using the title as heading. Concept title can be empty. Non-empty title plus content preceding first section shows above the accordion.

Section 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Section 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Carousel

concept with outputclass = carousel.

Each section is mapped to a slide, with the fig scaled to fill and any text content mapped to the caption. Alignment of caption on the slide is done via the outputclass on the section (text-start, text-end, with default text-center). Concept title can be empty. Non-empty title plus content preceding first section shows above the carousel.