htmlcsstwitter-bootstrapbootstrap-4

Hide an element in a page and make it visible only on print in Bootstrap 4


There is a web page showing information to the user. If the user decides to print it I want to include additional information that is not required on the screen, but would be helpful when printed.

In order to implement this behaviour I was trying to make a div visible only for printing. It hasn't worked though:

<div class="row col-md-12 visible-print">
   some txt here
</div>

I think visible-print class only works in Bootstrap 3, not 4.


Solution

  • Bootstrap 4 has great documentation and utilities..

    Display in print

    <div class="d-print-none">Screen Only (Hide on print only)</div>
    <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
    <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
    

    more info Display Print