0

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 work only on bootstrap 3 no 4 can you help me please

karbi
  • 193
  • 1
  • 12
  • 1
    Less than 5 minutes after opening the documentation: https://getbootstrap.com/docs/4.5/utilities/display/#display-in-print – Heretic Monkey Oct 22 '20 at 03:22
  • 1
    Does this answer your question? [How do I hide an element when printing a web page?](https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page) – blurfus Oct 22 '20 at 03:47

2 Answers2

4

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

ash
  • 456
  • 1
  • 3
  • 9
3

I have found the following useful in BS4:

@media print {
  .hidden-print {display: none !important}
}

Now it is the opposite of what you are looking for so just reverse it.

@media not print {
    .print-only {display: none !important}
}
Scott P.
  • 1,054
  • 11
  • 12