Print Utilities

Control print-only / screen-only visibility, page breaks, and print-specific sizing. Press Ctrl+P (or ⌘P) to preview.

Print-only vs Screen-only

Try it: open the browser print preview to see how these blocks swap.

Always visible on screen & print.

.lp-print-hide — visible on screen, hidden on print.

.lp-print-only — hidden on screen, visible only on print.

<div class="lp-alert lp-alert--info lp-mb-3">
    <strong>Try it:</strong> open the browser print preview to see how these blocks swap.
</div>
<div class="lp-demo-box lp-p-3 lp-mb-2">
    Always visible on screen &amp; print.
</div>
<div class="lp-demo-box lp-p-3 lp-print-hide lp-mb-2">
    <code class="lp-text-danger">.lp-print-hide</code> — visible on screen, hidden on print.
</div>
<div class="lp-demo-box lp-p-3 lp-print-only">
    <code class="lp-text-danger">.lp-print-only</code> — hidden on screen, visible only on print.
</div>

Page Breaks

Force page breaks around specific elements in print output.

print-break-before — starts on a new page

print-break-after — the next content starts on a new page

print-break-avoid — prevent splitting this block across pages

<p class="lp-text-sm lp-text-muted lp-mb-3">Force page breaks around specific elements in print output.</p>
<div class="lp-demo-box lp-p-3 lp-mb-2 lp-print-break-before">print-break-before — starts on a new page</div>
<div class="lp-demo-box lp-p-3 lp-mb-2 lp-print-break-after">print-break-after — the next content starts on a new page</div>
<div class="lp-demo-box lp-p-3 lp-print-break-avoid">print-break-avoid — prevent splitting this block across pages</div>

Print Sizing

Override widths for the print stylesheet.

wf-40 on screen, full width on print

w-100 on screen, auto on print

<p class="lp-text-sm lp-text-muted lp-mb-3">Override widths for the print stylesheet.</p>
<div class="lp-demo-box lp-p-3 lp-wf-40 lp-print-full-width lp-mb-2">wf-40 on screen, full width on print</div>
<div class="lp-demo-box lp-p-3 lp-w-100 lp-print-w-auto">w-100 on screen, auto on print</div>

Print Colors

Ensure text and backgrounds render correctly on paper.

Colored on screen, black-on-white on print.

<p class="lp-text-sm lp-text-muted lp-mb-3">Ensure text and backgrounds render correctly on paper.</p>
<div class="lp-demo-box lp-p-3 lp-bg-primary lp-text-white lp-print-text-black lp-print-bg-white">
    Colored on screen, black-on-white on print.
</div>

CSS Reference

Class	Description
`.lp-print-hide`	Hide element during printing
`.lp-print-only`	Show only when printing (block)
`.lp-print-only-inline`	Show only when printing (inline)
`.lp-print-only-flex`	Show only when printing (flex)
`.lp-print-break-before`	Page break before element
`.lp-print-break-after`	Page break after element
`.lp-print-break-avoid`	Prevent break inside element
`.lp-print-break-inside-auto`	Allow break inside element
`.lp-print-full-width`	Force 100% width on print
`.lp-print-w-auto`	Force auto width on print
`.lp-print-text-black`	Black text on print
`.lp-print-bg-white`	White background on print