Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

Question

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="visible-print hidden-lg hidden-md hidden-sm hidden-xs">

I'm using Bootstrap 3 and wondered if there is an easy way to accomplish this?

Answer 1

I think the fact you've used

hidden-lg hidden-md hidden-sm hidden-xs

across the div means you've effectively hidden it across all viewports. To simply hide or show a div for print use the following:

<div class="hidden-print">content for non print</div>

<div class="visible-print">content for print only</div>