CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3printing
Michael
Michael

Reputation: 13636

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?

Upvotes: 1

Views: 177

Answers (3)

user6536995
user6536995

Reputation:

Maybe something like 

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

Upvotes: 1

BENARD Patrick
BENARD Patrick

Reputation: 31005

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

Upvotes: 2

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Do something like this:

When in web mode - it would be hidden:

#printOnly {
  display : none;
 }

In print mode - It would be displayed:

 @media print {
  #printOnly {
  display : block;
 }
}

Place your image in div id=printOnly

Upvotes: 1

Related Questions