Michael Michael - 5 months ago 10
CSS Question

How to make HTML element to be displayed only when page is printed?

I have this html element:

<img src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />


How to make element above to be displayed only when page is printed, while in web it must be hided.

Any idea how can I achieve it?

Answer

Don't need to create your own CSS when Bootstrap gives you the tools...

Following bootstrap synthax :

<img class="visible-print-block" src="@Url.Content("~/Content/images/logo.png")" style="width:150px;height:80px;" alt="" />

Here is some classes specific to print state :

.visible-print-block
.visible-print-inline
.visible-print-inline-block

And here is the doc : http://getbootstrap.com/css/#responsive-utilities-print