How to remove waste on printing screens

Question

How to create a CSS to remove waste as in the attached image.

I’m wearing a bootstrap.

Answer 1

Use the following bootstrap classes

• hidden-print: not to show in print - will be displayed in HTML
• visible-print: to display 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 only be used in printing, I can remember two ways

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

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

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

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

Answer 2

With pure CSS just create in your style sheet a @media print { } or you can also have a file part by part and for that 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:

As the printing screen is usually modified/adapted to be better viewed on paper, you may want to modify your full page, so I decided to show some examples for you.

• With the * you are applying the attributes to the whole page and as some styles already come loaded by default, I resolved resetalos to have a clean printing screen.
• The same thing happens with the body, just reset some attributes and I apply a height for the lines.
• Now on the Header, Footer e .content 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 on the impression, you would have to apply a display: block; in it within the @media print and a display: none; out, so she appears only when printed.
• It is also important to remember the images, because depending on your style they can stay out of the printing area, so I showed the max-width: 100%; which does not allow the image to exceed the width of the page.