How can I add print-specific styles with d-print-* utilities?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I add print-specific styles with d-print-* utilities?

Asked on Aug 28, 2025

Answer

Bootstrap provides `d-print-*` utilities to control the display of elements when printing. These utilities allow you to show or hide elements specifically for print media.

<!-- BEGIN COPY / PASTE -->
        <div class="d-none d-print-block">
            This text will only be visible when printing.
        </div>
        <div class="d-print-none">
            This text will be hidden when printing.
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use `d-none d-print-block` to hide an element on screen but show it when printing.
Use `d-print-none` to hide an element when printing.
These utilities help customize the print layout without affecting the screen display.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I add print-specific styles with d-print-* utilities?

Asked on Aug 28, 2025

Answer

The Q&A Network