How to remove trash in print screens

With pure CSS, just create a @media print { } in your style sheet or you can also have a separate file, and for that you just add a stylesheet link in head , as the code snippet below shows. >

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

Examples:

@media print {
    * {
        background:transparent !important;
        color:#000 !important;
        text-shadow:none !important;
        filter:none !important;
        -ms-filter:none !important;
    }

    body {
        margin:0;
        padding:0;
        line-height: 1.4em;
    }

    header {
        display: none;
    } 

    footer {
        display: none;
    }

    .content {
        display: block;
    }

    img {
        max-width: 100%;
    }
}

Explanation:

Because the print screen is often modified / adapted to be better viewed on paper, you may want to modify your entire page, so I've tried to show you some examples.

• With * you are applying the attributes to the entire page and how some styles already come loaded by default, I solved them to have a clean print screen.
• The same thing happens with body , just reset some attributes and I apply a height to the lines.
• Now in the%% of% I just applied the display, that you will use to control what will appear and what will disappear. If it is necessary for an element to appear only in the printing, you would have to apply Header, Footer e .content to it within the display: block; and @media print off so that it appears only when it prints.
• It is also important to remember the images, because depending on your them out of the print area, so I % w / o% that does not let the image pass the width of the page.

Use the following bootstrap classes

• hidden-print : not to show in print - will be displayed in HTML
• visible-print : to show in print - will not be displayed in HTML

Example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="hidden-print">
  <p>Não mostra na impressão mas mostra no HTML</p>
  <a href="javascript:window.print()">Imprmir</a> 
</div>
<div class="visible-print">
  <p>Mostra na impressão mas não mostra no HTML</p>
</div>
<div>
  <p>Mostra em ambos</p>
</div>

You still have the option to create styles that will be used only in print, I can remember in two ways

1 - Creating a style sheet just for printing and importing into your HTML with the tag media="print"

<link href="style.css" media="print" rel="stylesheet" />'

2 - Or by using the @media print { } meta tag in your style sheet

@media print {
    /* Your styles here */
}