Bootstrap 4 CSS Causing Chrome's Print "Layout" to Disappear

Bootstrap loses layout printing portrait

You will need to write CSS for print media.

Here is a basic example based on your code

@media print and (max-width: 767px) {  .row{    display: flex;    flex-direction: row;  }  .col-md-3{    flex-basis: 25%;  }  .col-md-1{    flex-basis: 8.33%;  }  .col-md-8{    flex-basis: 66.67%;  }  .col-md-6{    flex-basis: 50%;  }}

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- Bootstrap 4, from LayoutIt! -->    <title>SPoE Testing</title>
    <meta name="description" content="Source code generated using layoutit.com">    <meta name="author" content="LayoutIt!">
    <link href="css/bootstrap.min.css" rel="stylesheet">    <link href="css/style.css" rel="stylesheet">
  </head>  <body>    <div class="container-fluid">    <div class="row">        <div class="col-md-3">        </div>        <div class="col-md-6">            <div class="page-header">                <h1>                    Integrated Next-Generation Test System                </h1>                <hr>            </div>        </div>        <div class="col-md-3">        </div>    </div>    <div class="row">        <div class="col-md-3">        </div>        <div class="col-md-6">            <div class="page-header">                <h2>                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>                </h2>                <hr>            </div>            <div class="row">                <div class="col-md-4">                <h3>#0000000</h3>                </div>                <div class="col-md-8">                <h3>pass</h3>                </div>            </div>
            <div class="row">                <div class="col-md-4">                <h5>Step 1</h5>                </div>                <div class="col-md-8">                <h5>pass</h5>                </div>            </div>
            <div class="row">                <div class="col-md-1"></div>                <div class="col-md-3">                power                </div>                <div class="col-md-8">                28.1                </div>            </div>
            <div class="row">                <div class="col-md-1"></div>                <div class="col-md-3">                current                </div>                <div class="col-md-8">                525                </div>            </div>
            <div class="row">                <div class="col-md-1"></div>                <div class="col-md-3">                voltage                </div>                <div class="col-md-8">                53.7                </div>            </div>
        </div>        <div class="col-md-3">        </div>    </div></div>
    <script src="js/jquery.min.js"></script>    <script src="js/bootstrap.min.js"></script>    <script src="js/scripts.js"></script>  <style type="text/css"> @page { size: auto } </style>  </body></html>

Unable to change the margin & layout for printing in chrome browser from angular 2

After hours and hours of research... I finally figured it out.!

set @media styles in the global styles.scss of your app.

NOT in the component.scss

If you want to dynamically change the layout to portrait/landscape you can do like the following

1) Remove the @media print{...} from the global scss

2) and in your component.ts call the print function by passing true/false

PRINT(landscape: boolean) {
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  style.media = 'print';

  style.appendChild(document.createTextNode(landscape ?
    '@page { size: A4 landscape; margin: 0in;}' :
    '@page { size: A4;  margin: 0in; }'));

  head.appendChild(style);
  window.print();
}

CSS Print layout is adding an extra page

Could it be there is something adding only 1 pixel somewhere? Since you define the page to use full 270 mm height. Even one margin/padding/border would add a new page.

Does it still happen if you decrease this value? If not, then I suggest you take a small bit off this value (you don't use full height anyway.) You can add page-break: after to .print_A4 to prevent a next page from taking the little space left on the previous page.

Google Chrome Printing Page Breaks

I've used the following approach successfully in all major browsers including Chrome:

<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Paginated HTML</title>
    <style type="text/css" media="print">
      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>
  </body>
</html>

This is a simplified example. In the real code, each page div contains many more elements.

How to deal with page breaks when printing a large HTML table

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>