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?
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>