Print Helper Classes

Print Widths

See general Size Helper Classes. Just add the prefix .print- to the helper classes.

Examples:

// sets the widths to 100% only for print
.print-h-width-100

// sets the widths to "auto" only for print
.print-h-width-auto

Print Margins / Paddings / Spacings

See general Spacing Documentation. Just add the prefix .print- to the helper classes.

Examples:

// resets all vertical margins _only_ for print
.print-m-y-reset

// xxl-padding on the right _only_ for print
.print-p-r-xxl

::: demo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

:::

Print Display Helper Classes

Hide on Print

.print-hide or .hidden-print / .no-print (deprecated)

::: demo

Hide me on print.

:::

TIP

If the hidden element contains another class .-is-visible or .ha-show/.hp-show/.rb-show (deprecated) it will be visible in print, too.

::: demo

Show on print.

:::

Display on Print

TIP

General helper classes are: .print-visible or .pdf-display (deprecated), which will display the element in the print view (display styles depending on element type),

It's preferred to use more specific classes like: .print-inline, .print-block or .print-inline-block or even .print-flex

::: demo

Inline on print.

Inline on print.

:::

Print Color Helper Classes

• .print-color-black to display the font in black.
• .print-no-bg to remove the background-color.

::: demo

No background-color on print

:::

Print Border Helper Classes

.print-no-border to remove a border.

.print-border-top to add a gray border on the top.

.print-border-bottom to add a gray border on the bottom.

::: demo

No surrounding red border on print, only bottom-border

:::

Avoid Print Page Break

Use .print-no-page-break to avoid a page-break within the element.

Print Table Helper Classes

Add a bottom-border to table rows (horizontal border): .print-row-border

::: demo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

:::

Add a bottom-right to table columns (vertical border): .print-col-border

::: demo

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

:::